We need a flowchart editor that doesn't give you carpal tunnel
scottantipa.com
scottantipa.com
However, would it be possible to make the flow go vertically rather than horizontally?
I find that a vertical direction of flow is
- more practical because of the ubiquity of mouse wheels for easy up/down navigation compared to the various less common ways of navigating horizontally
- the much more common direction for sequential steps in programs or scripts
- more culturally global, since there are quite a few right to left languages (as in addition to the left to right language used on this site :-)
- distance between boxes is easier to keep constant vertically while still allowing different size boxes (due to longer or shorter labels)
However, I think more research and experimentation are needed.
And phones are portrait and web browsers all naturally want to scroll up and down.
The Git graph tools are vertical because terminals naturally scroll up and down.
So all my hand-drawn graphs are vertical, too. Top to bottom, just like code or very narrow prose.
Horizontal is for data flow based graphs where nodes pass specific data blocks to each other. This is the norm in shader editors, Maya's node graph, blender geometry nodes, Unity shader graph, Unreal blueprints etc...
Vertical is for pass the world or step based graphs. Each node represents a step, and nodes mutate a combined state that gets passed down. Nuke, Houdini and Katana are like this
the vertical graph has a lot of familiarity with people because it's like a Todo list of steps.
Horizontal graphs are better for data flow because they can have tons of labels that run vertically and get connected to each other.
In some cases you even have hybrid graphs. Where data processing runs horizontally that feed into steps which run vertically. You'll see this in Pixar's Presto, and Unity's Visual Effects graph.
I’m not sure if anyone’s testing the UX of these or whether designers are just following convention from other tools, however.
Speaking of signal flows, I've almost never managed to put together a flow graph in gnuradio companion that wasn't a visual nightmare.
There needs to be some kind of way to say ”these things are siblings so arrange them side by side”, and likely some other ways of grouping and placing constraints on node positions.
Otherwise, the result will be essentially random placement.
What would really be a game changer: abstraction levels, so you could have a nice top level diagram of things and then decrease level of abstraction to reveal more details.
[0]: https://github.com/stepan-mitkin/drakon_editor
> - more practical because of the ubiquity of mouse wheels for easy up/down navigation compared to the various less common ways of navigating horizontally
You can actually do horizontal scroll by holding shift and scrolling the wheel. Learning this was a revelation.
Yep, that is helpful. But note that this is no universal standard. But most mainstream applications and browsers have it indeed implemented. Useful for big pictures etc.
I have maybe used a mouse once in the last decade (I use a trackpad)...and that mouse didn't have a mousewheel. And before that I used trackballs for a decade (again, no mousewheel). And before that, my laptop had a nubbin.
I recently set up a keyboard with mousekeys (on that computer, I have no mouse-ish-thing at all), and since I saw there was mouse wheel emulation, I attached that to a couple of keys out of curiosity, but I had literally no idea what those would do when pressed in any program since a mouse wheel is completely foreign to me.
Not saying you're wrong, just that the assertion of ubiquity struck me as strange.
I actually posted a very early version as a Show HN [1] which you can see was mostly met with question marks, and rightfully so. It was literally a grid, with the gridlines rendered, and had very cryptic keyboard shortcuts. I've spent the last year just working on the UX, to make an intuitive and fast editing experience.
I'd love more feedback especially about any UX issues. It's free to use the purely client side version, and you can join the waitlist [2] if you want a user account to persist graphs to the backend (I'm slowly onboarding people).
- [0] https://www.knotend.com
Anecdote: part of the initial hook in playing with knotend (i.e. fun) was trying to infer the key mappings. I didn't end up checking out the demo.
Regarding the larger picture of "diagrams for stuff", my own take is that it's a realm that one tool can't cover all use-cases. As an exercise, I started listing some of the broad use-cases and my go-to tools for them...
- simple (simplistic often) for presentations - where refined tweaking is key (Lucid chart, previously Inkscape)
- large, autogenerated - "I'll trace the flow, it just needs to be sane" (graphviz)
- structured customized, small/medium flow charts (yed/plantULM in the past, next time probably mermaid)
- gantt charts or other task dependency trees... these are like the "project task dependencies" you wrote of, but with a time aspect added in... (I don't make these much...) It seems like tools are likely to do gantt or flow charts well, but not both.
- nested text lists (not really a flow chart, but a common way of organizing my thoughts)
- flat lists (not really a flow chart), how I often dump large lists of todo tasks for projects. (I like using google sheets for this; I just wish I could drag and drop rows)
Having bumbled my way through listing all of that: I was going to ask if you think knotend is still on the path to being a general-purpose flow-chart editor... but then realized you specifically talk about "graph editor", and I have not formed opinions on that topic. So I don't have a question here really ;)
If you could find out more about why people like OP dislike overriding the default behavior, you might be able to provide those functions that they are missing. If it's devtools, you're out of luck, but someone who needs those probably already knows ways around the click hijacking.
It is a very nice tool with a lot of potential. At the moment I use tools like https://dreampuf.github.io/GraphvizOnline, knotend just adds the missing gui for editing with drag/drop and easy keyboard interaction. With arrow rendering as option and some basic way of styling (changing the background color is good enough for me, to distinguish different types of nodes) this can become my default tool for documenting flows.
The dot file import and svg/dot file/mermaid export as very useful for creating flows, including the svg/mermaid in documentation files and using the dot file for archiving / future changes.
I love how you can use the tools without first giving any information about you.
> I'd love more feedback especially about any UX issues.
Embarrassingly, it took me a moment to understand what the ^ sign meant in shortcuts.
Alt + L is "Ł" in some keyboard layouts (namely Polish (programmers)).
I suppose KeyEvent.location combined with default prevention could help here: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEve...
One minor feedback about the keyboard shortcuts: On macOS I would treat Option+Letter as reserved shortcuts because they are used to write special characters like Ω≈ç√∫.
Option-N is used to write any letter with a tilde, such as ñãõ and ÑÃÕ.
Minor feedback: not all buttons seem to be accessible to keyboard-only users. I'm just a Vim snob with a browser plugin, but for people who actually can't use a mouse your app seems like it would be perfect for them if you fixed that.
Edit: just making the "shortcuts" button accessible may be sufficient, as that shows how to use the keyboard shortcuts.
If it ever becomes worthy of your time I'll put it on https://withoutdistractions.com and add a separate reply here :)
I was wondering about version controlling flowchart and came across mermaid. As soon as I saw your tool, I thought adding export to mermaid plaintext would be nice.
And you already have that in there! I am looking forward to using your tool ASAP.
Github natively supports mermaidjs in their markdown, I wonder what kind of Github integration can be possible in Knotend.
[0] https://github.blog/2022-02-14-include-diagrams-markdown-fil...
Some UI feedback:
* On Windows, the tab and ctrl-enter shortcuts seem to be "captured" by the node input, like you have to push them twice if you're in the middle of typing something. You can't just type "test" and tab to the next node, you have to tab-tab.
* Box-selection (drag a rectangle around one or more nodes) would be super helpful.
* When you drag a node to move it, it's not immediately obvious what will happen to it. A move "preview", like a shadow where it's going to end up, along with how the lines will change, would be awesome.
* It would be REALLY cool to be able to import/export UML (https://plantuml.com/sequence-diagram). I love the semantics of UML, but darned if it isn't hard to edit quickly. Being able to use a keyboard interface, along with maybe a quick dropdown-selection to select node type, to quickly prototype a diagram and then export it to UML when done would be something I'd be VERY willing to pay for.
* It isn't super clear to me, in this system, how the connections between nodes work. Are there different arrows, strokes, etc.? Are there different node shapes (rectangles, diamonds, circles) like traditional flowcharts that represent different types?
Overall, really cool to see this happen. Thanks for making this and looking forward to future changes!
> On Windows, the tab and ctrl-enter shortcuts seem to be "captured" It's like this on alls systems at the moment. For example you can't use Tab to add a new node while you're currently editing the text of another node. I'm working on this but its a bit complicated because some shortcuts interfere with system shortcuts for text editing.
> * Box-selection I agree!
> * When you drag a node to move it, it's not immediately obvious what will happen to it. This is a really good idea. I was just a little lazy and didn't add any ux niceness here. I could probably add some phantom connection lines showing what edges would get aded.
> import/export UML I'll take a look on exporting to UML. I'd like to support as much import/export formats as is feasible.
> how the connections between nodes work The connections are simply an edge in the graph. There isn't any styling or way to convey meaning to an edge. One of the big differences with knotend and other diagramming systems, however, is that knotend isn't geared towards making particularly pretty diagrams. It's very much designed around speed. So for example it supports colors, but doesn't support any manual layout or custom shapes. To be honest I'm not sure if/when it will. But I'm happy to export to those systems. If you email me with any example diagrams that you've made using UML (or other systems) I can see how those may work in knotend now or in the future.
Thank you for all the great feedback, it really is super helpful!
What do you think the grid actually helps with though? Seems like most of the benefit is the keyboard shortcuts to create child/sibling nodes? Is it just because the grid provides keyboard nav (arrow keys) to the different nodes?
Yep thats a critical piece
This is an interesting claim. I've programmed LabVIEW professionally and didn't have to take breaks every few minutes. And neither do PC gamers.
What about PlantUML and other text-based diagramming solutions? How do those compare here?
On a different note, it's interesting to look at the pricier XBox/PS/Switch controllers through time, their goal being to fit as naturally as possible. And then we get round mouse pucks and straight edge phones from Apple.
Once you have something comfortable and good enough, the hard part is building the muscle memory and moving layers of the game into unconscious domains. Aim should fall below thought, and with time, understanding the state of the game and the potential space of options of (for example) positions of an enemy based on the state of the game and what information you have. These start to fall outside of what you may call conscious thought.
These are much more important than the gear you have, because the reality is there are millions of options for hardware and most of them are fine. The tool does not make the craftsman. They can be tools, for example, I have a separate desk for gaming and for work. If you mix the two, the space becomes less meaningful and does not have a single dedicated use. This is also why I use separate keyboards, separate machines, separate monitors, etc for compartmentalization within my mind, so that I can get away from work or get away from gaming. I also do the same with clothes. Work clothes have textures I associate with work, and use texture differences in clothing to get into home mode or work mode. Showers help for creating a state change. :)
However gamers are more prone to adjusting their mouse DPI for comfort. To some this means wide sweeps across the desk for minimal movement to maintain accuracy at the elbow. For others it means the slightest flick of the wrist sends the cursor across the screen for maximal reaction speed.
And of course many games don't use the mouse much at all still. I don't think you can really categorize gamer mouse usage in any way other than "comfort to efficiency ratio per task".
Put mouse movement as high as possible.
I've created a fair number of architectural diagrams in the past 4 months and I keep bouncing between PlantUML, Mermaid, and Visio. I always end up frustrated with all of them, though mermaid is my current go-to.
Mermain and plant UML are great for simple graphs, but more complex graphs always end up doing something that makes it hard to read. If I could manually re-arrange the nodes I could make it more readable but both solutions are all or nothing solutions.
While I don't get wrist pain all the dragging, manual graph editors are slow because it requires a ton of micro managing that's pointless, but once you have a graph setup it makes it really fragile to update based on feedback, a lot of time requiring significant rework for very little logical changes.
[0] https://crashedmind.github.io/PlantUMLHitchhikersGuide/layou...
I think the way graph layout should work in visual tools is that it should be domain-specific automated layout with user adjustment. However, the tools aren't anywhere close to that. And in fact, I have struggled to find existing graph algorithms for this stuff. None of the graph layout algorithms I have found can take user defined constraints as input, and they definitely cannot take local, manually adjustments. There's a lot of work to be done here, but it doesn't seem like anyone is interested.
This seems to be a tad faster and easier to use that PlantUML/Mermaid/WedDiagrams when representing simple flows, or at least straightforward diagrams.
The main trade-offs I personally see:
- I actually want control over the layout. The goal of the diagrams is to convey info in a readable way, and getting a spaghetti when it becomes too complex doesn't help.
- Straight text base solutions allow for pattern replacements, snippets, whole copy/past from different docs etc.
- Aliases don't seem to be supported. Typing over and over the node names isn't fun.
I agree with your take on the layout. It isnt an easy problem. I’m looking at adding a grouping concept so the user can add more hints about the layout.
I had always wished they'd integrate those demos where there is no more manual layout. Pixel level layout, even with an auto layout shortcut, is just asking for people to waste time on it.
They don't make me want to throw my mouse. I can work on the diagrams in my IDE. There's next to no context switching. I write code to generate diagram markup.
It might vary with individual physiology. I worked in LabVIEW for several months, more than 25 years ago, and the combination of eyestrain headaches and wrist truma were practically debilitating. To be fair, I also had problems with any software that involved tiny graphics, elaborate menus, and fine mouse work, such as CAD.
Text based programming, and plain text editing, are actually things that I use as a refuge from the physical demands of operating GUI based software.
Tiny text, ugly colours, incomprehensible patterns, totally random alignment, etc. Looking at [this](https://upload.wikimedia.org/wikipedia/commons/f/ff/LabVIEW_...) would give anyone a headache.
I'm not a fan of graphical systems in general for other reasons, but we probably shouldn't decide anything based on something as bad as LabVIEW. Simulink is way better for example.
> Yeah to be fair, LabVIEW is the absolute worst graphical programming system.
That's a strong statement. I am unaware of any visual programming environment as powerful as LabVIEW. Nothing is close. LabVIEW has several features over text-base languages as well.
However, I am a strong critic of LabVIEW, but not for the reasons you list. The UX could definitely be improved, and this is something I'm looking into.
NI did embark on the LabVIEW NXG (next-generation) project but boggled it. It is tough. LabVIEW is thirty something years old. The only remaining product from the NXG endeavor is the LabVIEW NXG Web Module. There were some improvements but there could have been more. It failed due to mismanagement.
Ok is this any better?
https://ni.scene7.com/is/image/ni/597f9f24966?scl=1
Still looks awful, and that's from the official documentation.
> LabVIEW has several features over text-base languages as well.
Really? Like what?
There's a belief that LV is easy for novices to learn, such as test technicians and engineers. Interestingly, the other easy "language for the rest of us," Excel, is also a dataflow programming environment.
The graphical "language" was introduced for the Apple Mac II at a time when there was a lot of excitement for "graphical everything," and again a view that the graphical flow chart would make it intuitive for non-programming engineers. The simplest LV programs had an almost 1:1 correspondence to things that were familiar in test hardware such as knobs, switches, meters, and so forth.
Now my main critique is the sheer physical labor required to write and edit programs. This could actually lead to sloppy code, if it's too painful to refactor things. I think that if there were a good text based dataflow language, and LV adopted it, the graphical language would fall into much more limited use (e.g., for adding user interfaces to programs). That's just my hunch.
It’s also more accessible than a diagram to someone visually impaired. And you can even dictate the contents of the diagram if you want to and your UI supports it.
The "make a salad" example is an exception to the above but I think it gets away with it because the branched paths are of equal length and overall it's not too large. Once you get even slightly off this, like the Mars example where a branch is 1 box longer than the other, it can easily fall apart. Such branching and reconnecting topologies tend to result in things in the editor moving around on you a lot while you're trying to create the paths which can be disorienting as well. Other options such as code2flow which have already been mentioned here can get away with as much on the fly restructuring as they want because they separate graph construction and graph representation in the UI whereas this combines them. Maybe an option here would be a toggle to disable overall graph auto-layout but keeping the keyboard shortcuts and auto default placements? Or maybe it's just best to focus on where it's unique.
An "easy win" feature add for knotend might be a set of shortcuts to change the symbol and maybe some automatic ones like terminals or decisions that get set based on their connectivity in the drawing (unless otherwise manually set). As it is now everything is a rectangle which typically means "process" in flowcharts.
I’d like to avoid manual layout because I haven’t found a way to support that without sacrificing speed. But I dont disagree it would be nice if theres a clever way to do it.
If you haven't already, you should check out Workflowy! You would be a fan of their design, since everything is centered around recursive lists and operations on them. They also noticed that lists are isomorphic to boards, so any list can be shown (and edited!) as a board without loss of information. I could imagine a similar isomorphism from those lists to graphs, which knotend visualizes.
I had trouble using the tool though, here's some things I noticed:
* <Tab> doesn't work when the graph is empty, and causes the "Sign in" link to get selected instead.
* It feels like nodes can be in different states depending on if I'm editing the text, or just have it selected. For example, typing a name and hitting <Tab> does not create the child. Looks like the app is trying to mimic spreadsheets, so this is surprising. Same with <Enter>, I'd expect it to make a sibling whether I'm in editing mode or not.
* The curved connecting lines between nodes don't scale well, and look a bit strange. This is a big problem, because knotend has to work just as well with small or huge graphs. Given a node, I have to know which nodes are up- and downstream of it immediately. As is, it gets confusing the moment I have two sibling nodes each with disjoint/shared children. ObservableHQ handles this by highlighting connectors to the parent and child nodes.
Definitely looking forward to seeing how this grows! I think it's close, but for it to be as easy as writing lists, there can't be a distinction between editing and not-editing.
I made a tool for this if you'd like to use a dependency first project management tool! [1]
The current key shortcuts seem a bit wrong to me though.
A few issues:
- Tab is never ever used as a "create something" button. It's always "move between things". So this is the wrong choice. And making shift-tab create something in a different direction is completely unintuitive. Shift-enter or ctrl-enter or something would be better.
- It shouldn't be possible to have multiple created-but-empty cells. UIs seem to work much better when there is only one cell in that state. If you create one then move away from it before editing it, it should go away.
- Needs bigger visual difference between editing state and selected state.
Also, I'd suggest that there can be a preview mode that uses pretty layout (non-grid based) then edit mode which uses the grid.
TFA could be Two Factor Authentication, but it does not really fit and I prefer to use 2FA. Searching online yields Database Availability Group for DAG, but I prefer to ask.
And all this because SVG export was bugged (not valid syntax) on Mermaid to get similar quality.
Apropos of nothing, LyX[1] is a pretty good stand in depending on one's needs and tolerance.
There are some challenges if you need something that has more complex styles (e.g., customizing the Memoir book styles). These are well within the range of programmers and not super hard if you're reasonably competent and/or willing to search / read. The payoff is that you're forced into using styles instead of kludges, and you don't have to worry about layout (much) anymore.
I love the varied export options, my one suggestion is to be able to export or copy/paste some of the information into a more flexible, less marked up format - e.g. a text file, csv, etc. even if it means a loss of some of the information.
Why? A visual flow chart isn't always the (only) end product. Eventually you'll want to extract information out of the tree without having to parse or regex a dot / mermaid file to do it.
I went down this route back in the 00's with various mind mapping tools. I used them to explore projects, processes, sort out designs, think through problems. It was so quick to get relationships down and see the bigger picture.
But then I was left with a bunch of mind maps that I wanted to turn into other things, for example todo lists, project plans, document outlines, flow charts etc. The mind map software tended to export exclusively into either images or other mind map formats, so all that information was effectively locked up.
Sure I could write a script to regex what I wanted out of those formats, but why couldn't I just copy and paste the titles from the tree into a text file?
It seems no matter how complicated you make the layout heuristics or what kind of dynamic iterating system you use when it comes to large connected graphs they just look nothing like a human would make. I'm not sure how would would get a large enough quality training set but it just feels like something that could be better done by machine learning than further manual definition.
I have a a couple of thoughts around the interface that might (?) be useful. I absolutely realise this is a work in progress, and you may already have these in mind. :)
* A keyboard shortcut to bring up the right click/edit menu. There's the existing menu key on non-Mac keyboards, which is probably the best thing on non-Mac keyboards to hijack.
* There doesn't seem to be any easy way to pick nodes that not right next to each other and or delete connections. ie; Something that emulates holding down control, and clicking on multiple items (or even just two).
* Potentially, a way to search in the graph using the node text. ie; hitting / would create a search box, which typing it would select the subset of nodes that have text matching the search text, which could be use to select from.
> A keyboard shortcut to bring up the right click/edit menu.
Ya that would be cool
> pick nodes that not right next to each other and or delete connections
If you right click on a connection (line) you can delete it. You can also cmd+click to expand the selection to multiple non-adjacent nodes.
> a way to search in the graph
Ya that will be necessary once these graphs get huge. I'd like to do a search-to-scroll feature where you can jump to nodes that match.
For example, if the tools could shift stuff around so that boxes don't overlap, I won't need to spend ages shifting stuff; if when I link one box to another with an arrow, it doesn't weirdly snap to different places on the box, then I wouldn't need to fiddle with it to try and separate/combine lines; If I could set the mode to curved connections (mindmap style) or square (all lines are angled by 90 degrees) then it would lay things out well.
It might suit a different use-case than what I think of as a flow chart though so hope it helps people.
It's not pretty for presentations, but it works really well for engineers in many situations where the flow isn't super complex (think 2d-array instead of tree w/ many branches).
But if you want more tree like structures - there are a number of mind-map software that can change the representation to tree AND have keyboard navigation and control. Freemind being one.
So far Graphviz is the closest. Plain text in, flowchart out. I would say "you can't beat that" but I think that you actually can. I think that it is possible to create a good interactive tool for editing DOT, it's just hard and probably would be pretty niche.
Constraints goes a long way. Auto layout and grid like structure helps to make things neater. I don't see a problem in using a 2D canvas to show these dependencies.
But the issue is that the typical flow doesn't really match how we think. For example, we think about what needs to be done after X. Meanwhile the typical flow is: Write X, then Y, then connect the arrows.
From building and using Recall, I also found that we (at least myself) don't always think linearly. I often need to add or remove tasks in the middle.
Most often, I am already working on a task when I realize that something else needs to be done. Or I put a note that something needs to be done later.
If you're interested in this kind of project management, I'd love to get your feedback on Recall. I'm also constantly improving the experience so let me know if you'd like to be updated!
But have also enjoyed making nice diagrams in mermaidjs especially the sequence diagrams. Prefer markdown to digram for code maintainability. Was recently seeing a youtube talk from C4 author on composable diagrams and agree to a lot of what was said in the talk. Src: https://www.youtube.com/watch?v=Za1-v4Zkq5E
Keyboard to diagram is much faster than mouse based diagram tools and have found them better for long term use cases. Quick diagraming in excalidraw or figjam doesn't hurt though when brainstorming especially with not very technical folks as they can easily contribute.
I wonder though, how people really use stuff like this and what are the key things that make them find it useful?
I've tried different approaches and found flowcharts mostly only work for really trivial things, and even then only if there's a very strict hierarchy (which almost nothing actually is).
Get into even a single module of code (never mind the whole system) and a chart at any significant level of detail becomes an illegible mess. At best just an image to gloss over in a slideshow to try to look impressive, without actually trying to explain anything. Anything with any complexity needs a wikiweb of details and relations. And that's a mess to maintain.
But I do love the idea. And making it simple and easy to do with the keyboard is great. Just wonder how people actually use it.
And it's also great to show dependencies between work tasks in project management tools. I actually made Recall [1] for this specific use case.
GraphViz is a traditional choice: https://dreampuf.github.io/GraphvizOnline/#digraph%20G%20%7B...
However, I'm the author of a finite state machine with a graphviz-like language that uses GraphViz as a renderer, and I personally prefer that language: https://stonecypher.github.io/jssm-viz-demo/graph_explorer.h...
-Tab to add a new figure on the canvas -Enter to add a new paragraph in the shape -Arrow keys to move a figure -Shift arrow to move between figures
https://www.breakdown-notes.com/make/load/hotkeys https://www.breakdown-notes.com
I'll be sticking to Miro.
But in general, it needs to look nice. It should be pleasing for the eye to watch the diagram, should spark curiosity to investigate how the system works. Straight lines, consistent shapes for specific meanings, colour coded blobs. Directed edges also seems to work well. Once I told an ops guy "start here at the leaf, then follow the arrows", it really clicked for him. And at the end of the day, it's a frontend, with all it's ups and downs, and should be treated as such.
The other chart types I use this for are org charts, mind maps, and network diagrams which are all similarly automated.
If I may suggest a feature, It'd be great to have probability estimations of each of the node, and then the leaf nodes (last node in a stream of dependencies) would have its probability computed as the multiplication of all parents.
This would make it obvious when something is not gonna happen :)
And it would make it easy to detect which part of the chain with a low probability kills the entire chain :)
- If you draw a lot of sequence diagrams, this one is a feature-rich type-to-diagram life saver: https://sequencediagram.org
- For component/architecture diagrams: https://diagrams.mingrammer.com
The one thing i couldn't find a way to do is to multi select items on mobile.
I saw in the demo video it's possible with the keyboard on the desktop UI but unless I've overlooked some shortcut then it seems like it can't be done on mobile.
I’d definitely be interested in that!
if you're doing anything more complicated by hand than you can achieve in that kind of setup, you're likely better off with a more sophisticated dedicated tool / manually doing all of your layout. but I have yet to see anything else get even close to beating this setup for "zero to a usable diagram" time or effort.