17 ms·

We need a flowchart editor that doesn't give you carpal tunnel

486 points by escot 4y ago

nmstoker 4y ago
This is cool. Being afk right now, I initially thought i couldn't use it on mobile but the menus and icons saved me. 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.
- nmstoker 4y ago
  I suppose tweaking the menu/ icon sizes when it's recognised as being in a mobile browser might be an idea (or at least something to let the user toggle to/from slightly more mobile friendly sizing of icons) would be handy
tylergetsay 4y ago
Shoutout to code2flow.com for another solution
oftenwrong 4y ago
I have started using mermaid to create flowcharts. It lets me break free from having to think about layout entirely. Plus, I can use my favourite text editor. https://github.com/mermaid-js/mermaid https://github.com/mermaid-js/mermaid
- sbelskie 4y ago
  I really like mermaid but I have found larger flow charts often make odd rendering decisions (especially with sub graphs). Otherwise it’s incredible.
  - ta988 4y ago
    Graph layout is extremely complex and there is no good automated way to do it yet (or ever). Even specialized software like plantuml, cytoscape or gephi (depending on the kind you want to do) struggle on some graphs that a human can layout decently well by hand.
    - zamadatix 4y ago
      Coming from the computer networking space this is somewhere I've been hoping to see a big machine learning splash like language translation has seen since large network graphs are either a big ball of mess or out of date because it takes too much human time to keep up to date. 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.
- deleted 4y ago
  [deleted]
- Kerrick 4y ago
  The tool from TFA also breaks the user free from thinking about layout entirely, and can export to Mermaid. It's a pretty fancy-looking way to _quickly create_ a graph that I plan to try instead of manually typing Mermaid syntax next time I need to make one.
smitty1e 4y ago
Graphviz? https://sketchviz.com/flowcharts-in-graphviz https://sketchviz.com/flowcharts-in-graphviz
- Groxx 4y ago
  http://webgraphviz.com http://webgraphviz.com + add an on-key-up event to the text area that clicks the button = my favorite graphviz editing experience. 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.
cjlm 4y ago
flowchart.fun [0] may scratch the same itch – I just interviewed the sole developer [1] 0: https://flowchart.fun/ https://flowchart.fun/ 1: https://sourcetarget.email/editions/43 https://sourcetarget.email/editions/43
butwhywhyoh 4y ago
Since all of the other comments are just people pasting links to their personal favorite thing that is tangentially related, let me be the first to say that this looks fantastic. I often run into the same frustrations that you're attempting to solve here, and for a demo version it looks like its in great shape. I will likely try to use this at work this week to take it for a test drive.
- deleted 4y ago
  [deleted]
- escot 4y ago
  I'm happy to hear it, let me know how it goes!
zamadatix 4y ago
I tried this out for a bit and it was definitely interesting. For flowcharts that are closer to a pure tree it's blazing fast and simple to work with, more than anything else I can remember trying. Though for more complicated flowcharts that break out and remerge it can be very confusing to both edit or read. If the the tree-style or pure linear is more your use case I highly recommend trying it out despite its demo state, even if just to export the topology into a tool that will draw it fancier if this isn't "wowing" you on the looks side of things. 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.
- escot 4y ago
  In terms of the lines crossing, you’re right I have to work on the algo. It’s just not been something I prioritized because its not often a problem until you get into larger graphs. 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.
layer8 4y ago
I like UML activity diagrams, which let you express data flow as well as control flow, and also asynchronous activities with fork/join and events, among other things. See for example https://www.visual-paradigm.com/guide/uml-unified-modeling-language/what-is-activity-diagram/ https://www.visual-paradigm.com/guide/uml-unified-modeling-l....
chris_wot 4y ago
Graphviz has a syntax for directed graphs, it’s fairly intuitive. Not sure why it couldn’t have a text box on one pane and an immediate graphical view on the other. I’d definitely be interested in that!
- escot 4y ago
  Someone made a web version of what you’re describing: https://dreampuf.github.io/GraphvizOnline https://dreampuf.github.io/GraphvizOnline
drdude 4y ago
PlantUML is my favorite... but it is all texual. There is a great support for it on VSCode and Emacs for previews. I prefer VSCode to create my UML diagrams and Gantts (even though I am mainly Emacs)
- iLoveOncall 4y ago
  Being all textual is a feature, you can put it in your VCS for example. Just for that reason it's infinitely better than any other solution.
  - drdude 4y ago
    I strongly agree. I only mentioned "but it is texual" because it looked like that the author likes GUI-based one.
    - escot 4y ago
      Knotend now can export to PlantUML
phailhaus 4y ago
Love this. I think we are missing a UI paradigm for visualizing and editing graphs effectively, and I love seeing stabs at the problem. It is absolutely insane that dependency graphs aren't a first-class feature in all issue trackers. The fact that graph visualizers are so complex is probably a big part of it. I'm a fan of your approach because it's reusing familiar UX patterns that people already know, like making nested lists. 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.
- escot 4y ago
  I’m still playing around with allowing the keyboard shortcuts to take effect even when editing a node. At the moment they conflict, like the option- prefixed ones. But I agree it could be nice to find a fluid way of doing it because it means fewer keystrokes.
  - escot 4y ago
    Ok, I fixed this. You can now Tab (etc) while editing a node to add a new node.
keithnz 4y ago
while I like the user interaction, and while diagramming tools really do need this kind of quick way of creating diagrams, at the moment, this tools end result is not really that nice for doing flowcharts, and looking through the examples there really is nothing compelling, and some of the examples seem a bit odd ( like the onboard customer example). As this demo gets expanded, it will be interesting to see if it can stay simple as things like conditional paths / loop back mechanisms are created. If that's not the intention, then this is more of a tree builder than a flowchart editor. A simple example I'd like to see is a flow chart for traffic lights / pedestrian crossing control system.
- escot 4y ago
  Right now its geared towards right-to-left directed graphs. Probably because most of my use cases have to do with time (like project timelines). So the state machine you mention towards the end isn't an immediate goal because a) it probably needs nested states, and b) it probably has tons of cycles which knotend doesn't do great at the moment.
stevage 4y ago
I love the goals here, and this can definitely work. 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.
- woleium 4y ago
  Disagree with tab for new item, as this is how you enter data horizontally in consecutive spreadsheet cells. Agree with other comments tho :)
  - sleet 4y ago
    and tab is used to add a new post it notes in Miro (when another post it note is active)
bmitc 4y ago
> After dragging around boxes for a few minutes you need to take a break and ice your wrists. It's just too slow, there's too many micro-interactions, and it distracts you from what matters most: defining your dependencies. 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?
- deleted 4y ago
  [deleted]
- yjftsjthsd-h 4y ago
  I wonder if gaming uses a different (smaller) movement range than "serious" applications?
  - makeitdouble 4y ago
    I'd expect gamers to be serious about their setup and adjust it to fit their body at best: mouse size, weight, buttons arrangement etc. same for the keyboard. Also gaming gear is usually better in almost every dimension. 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.
    - hhh 4y ago
      It’s more about consistency. Whatever is comfortable comes first, and should be done at the same time as finding what works (i.e. is good hardware: good sensors, keyboards (and with newer custom boards some have strange firmware latencies likely related to denouncing(see the gmmk pro.)) 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. :)
zelphirkalt 4y ago
I once used a tool called "PAP Designer" ("Programm AblaufPlan" Designer), which had a great system for allowing you to put new boxes. But I am not sure it still exists and fullfils the all needs, as a plain flow chart might not be all you need. You might want to add comment boxes and stuff. Otherwise I usually use yEd Graph Editor and haven't found anything better and lightweight yet.
d0mine 4y ago
Another keyboard-friendly way to edit graphs is Org mode in Emacs e.g., org-brain https://kungsgeten.github.io/org-brain.html https://kungsgeten.github.io/org-brain.html
ryanmcbride 4y ago
I just use a pen and notebook and take a picture with my phone to share it. No software has ever been able to let me switch between drawing boxes, drawing arrows, and writing text as quickly and accurately as I can with a pen.
toomanydoubts 4y ago
This is cool, but I've given up on visual editors for graphs long ago. Graphviz and, more recently, mermaidjs, have been very useful for me for all my diagram needs.
hellohowareu 4y ago
Try Mermaid. It's a pleasant experience. And it can be used as a stand alone diagram editor, or integrated with software programs. https://mermaid-js.github.io/mermaid/#/ https://mermaid-js.github.io/mermaid/#/
- Kerrick 4y ago
  The tool from TFA can export to Mermaid. I've used Mermaid to lay out some DAGs to visualize prerequisites & parallelizable tasks in large projects, and it certainly isn't as fast to use as Knotend seems it'd be.
  - Hnrobert42 4y ago
    Whoa! No need for such hostility.
  - aloisdg 4y ago
    What is TFA and DAG? 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.
    - zvr 4y ago
      TFA is "The Fine Article"; essentially this HN submission. DAG is "Directed Acyclic Graph"; a graph with directed edges and no cycles.
      - aloisdg 4y ago
        Thanks. I open an issue in the list of acronyms I maintained: https://github.com/d-edge/foss-acronyms/issues/55 https://github.com/d-edge/foss-acronyms/issues/55
- solatic 4y ago
  Mermaid is more of a WYSIWYM tool where Knotend is more WYSIWYG. WYSIWYM tools are quite valuable in the right contexts, but there's a reason why LaTeX never really threatened Microsoft Word.
noizejoy 4y ago
First of all, I really like the concept of grid based flow charting. It's one of the popular metaphors used in "wiring" software based musical instruments and effects and works really well for a significant percentage of signal flows that don't have too many back looping or crossing virtual wires. 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)
- mushbino 4y ago
  It's interesting to see this perspective. My experience with canvas-based flow charting applications shows that users prefer the horizontal left-to-right flow. The ability to shift drag the canvas usually makes horizontal scrolling a lot easier. I believe it's mostly due to the fact that people find writing to be the closest metaphor. It is expected that adding a new node or step will appear to the right of the current one. However, I think more research and experimentation are needed.
  - ReactiveJelly 4y ago
    But as the length of a written document goes toward infinity, whether the document is prose or code, it ends up going down. 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.
    - mushbino 4y ago
      For sure, what you're saying is true, but I suppose it depends on the content, layout, and how it's used. Vertical is typically better when first word type scanning is important, like data tables or anything similar. Horizontal scrolling in data tables is something I hate with a fiery passion and do everything I can to avoid, for example. When a workflow or series of interconnected elements are what's important than horizontal tends to work better for how people think about those things, imo, but there are exceptions to every rule. Basically, it just depends.
solraph 4y ago
Had a play with it, and it has great promise. I love that the keyboard interface is given priority. 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.
- escot 4y ago
  Thanks! > 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.
irjustin 4y ago
FWIW, I 'whiteboard', flow chart and everything using google Sheets. 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.
- escot 4y ago
  This is exactly how I prototyped knotend. For some use cases just a spreadsheet is great.
alexalx666 4y ago
This is web 4.0, zero bloat
escot 4y ago
Hey all, author here. Graphs are used for tons of purposes across a lot of disciplines, but we don't have a fast general-purpose graph editor. That's what I'm trying to do with knotend [0]. It's a keyboard-driven directed graph editor. I made it for myself for planning project dependencies. It's also a great tree editor. 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 https://www.knotend.com - [1] https://news.ycombinator.com/item?id=27256861 https://news.ycombinator.com/item?id=27256861 - [2] https://www.knotend.com/waitlist https://www.knotend.com/waitlist
- gertlex 4y ago
  I really enjoyed the few minutes I spent with it, and I've got it bookmarked for the next time I want to visualize a large number of tasks and requirements! Your described use case of "project tasks dependencies" particularly struck a note in my head. 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 ;)
nikolay 4y ago
You should offer invites to HN users.
- escot 4y ago
  Absolutely. Most traffic today will be from HN so I'll give preference if you join yesterday/today: https://www.knotend.com/waitlist https://www.knotend.com/waitlist
  - nikolay 4y ago
    Of course I did sign up when you posted it, but still no invite yet.
    - escot 4y ago
      Added you. Look for an email from scott@knotend.com
      - nikolay 4y ago
        Nice! I'm in! Looks great! I will provide feedback! Thank you so much!
        escot 4y ago
        Email anytime :)
Aeolun 4y ago
You may want to have a look at Terrastruct, which recently released text based auto layed out graphs as well.
aaronwalker 4y ago
Great idea, It’d be even better if you could add functionality for more complex diagrams, like what draw.io offers. In my OOP classes for every project I’d be assigned to upload a UML diagram, which is incredibly tedious to do with drag and drop software, especially for large projects. If this keyboard shortcut flowchart editor could support UML diagrams this would have saved me a lot of time!
urlwolf 4y ago
This feels really good. 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 :)
- escot 4y ago
  I'd like to add some kind of computational support, and you're right that probability fits pretty naturally. Do you know of any other tools I can take hints from? Or any domains/disciplines that need this?
__MatrixMan__ 4y ago
I like it. I wish it could export Airflow DAGs so all I had to do was fill in the interesting parts.
- escot 4y ago
  Do you know of any tools that export to airflow? I’d be happy to implement it. Would you want to write python code in the nodes, or just the names of functions (or modules)?
Sophistifunk 4y ago
Why do we need a good user interface for editing dependency graphs which are generated, not drawn?
- neoberg 4y ago
  Because they are not always generated.
baalimago 4y ago
For me, the lack of speed in creating the dependency graph has never been an issue. The issue when it comes to flowcharts has primarily been creating the correct scope for the particular task, to have the right visualization tools to display my intent and to fill the chart with relevant information. When I have tools all of this, a high amount of conceptual information can be baked into a small and easy-to-access space. In my experience, "all" the info is very rarely required (which the speed-dependency-chart implies), since very few can process it anyways. I'll be sticking to Miro.
- michaelsalim 4y ago
  Do you have a strategy for that? I do have the same issue sometimes.
  - baalimago 4y ago
    No specific strategy, I'm still trying to figure out what makes some diagrams better than others, and how to design diagrams which "works". The one I've used which have gotten the most spread in the company I'm working at were is one which mapped the transformation of a specific state in the microservice architecture. The state in question is highly central to our products success, and it reflects many (but not all) the relations between services. The dataflow were from leaf entrypoints, through processing, and finally stopped at internal consumer endpoints. The result is a reversed tree structure where each node is a microservice/external service (text in node explains which one, and linked to gitlab project) and each edge said which protocol is used for them to communicate. So, it reflects what services are required for a specific customer, depending on which path the customer takes in order to produce this state for internal consumers. Doing this enabled us to also analyze the "hot path", and "cold path" to know what services were problematic (rarely used/overused/too poorly written considering their importance/etc) and not. 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.
Aeolun 4y ago
Would it be possible to not transform my browser history into an undo/redo graph?
Falkon1313 4y ago
That looks nice, for really simple things. 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.
- michaelsalim 4y ago
  There's plenty of place where graph representations are great. First thing that comes to mind is git history. Another is shader nodes. 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. [1] https://recalllab.com https://recalllab.com
throwaway14356 4y ago
(in on a phone atm) the example video needs enough complexity to make it worth using the tool. Its simple enough to understand that i think you can do the full tutorial as the demo.
mattewong 4y ago
if you can combine this with cloud services (for example, each node is an S3 bucket or a lambda function) and now we're cookin with gas
- escot 4y ago
  Are you thinking of AWS step functions? They have a json format I could possibly export to but I haven’t looked deeply into it.
squiddle 4y ago
Look into Flying Logic for a very efficient visual diagramming UX. https://flyinglogic.com/ https://flyinglogic.com/
cher14 4y ago
Breakdown notes also comes with some helpful keyboard shortcuts to not use the mouse as much. This was added not so much for flowcharts, but to make it easier to write notes quickly. -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/make/load/hotkeys https://www.breakdown-notes.com https://www.breakdown-notes.com
- tbdr 4y ago
  @cher14 best way to contact you ? info@ bounces back :(
abhimskywalker 4y ago
Over last 10 years have used Freemind & (last few years) Xmind to kind of make superfast flow charts in the tools dressed as mindmap tools. So i can see the appeal of knoted here for quick jotting down of thought flows. 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 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.
- progx 4y ago
  Mermaid? I like mermaid, but it is not fun, it is not fast and it is not comfortable, especially when you have bigger diagrams or must edit them.
praptak 4y ago
I want a flowchart editor which doesn't give me carpal tunnel but I also want (some) control over the layout. 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.
eigilsagafos 4y ago
Co-Founder of ShiftX here. We are building a flowchart/BPM/knowledge-graph hybrid. We also use a grid and support splits/loops/joins in a way where we try to optimize for readability. Feel free to try: https://shiftx.com https://shiftx.com. Feedback welcome!
Terry_Roll 4y ago
No, you need the lightest wired optical tracking mouse you can buy which is the right size for your hand to rest on. Forget wireless mice with the added weight of batteries, these will increase your carpal tunnel syndrome!
tolai 4y ago
I REALLY like this!!
hkon 4y ago
Yes, not a flowchart, but I like the concept implemented at https://sequencediagram.org/ https://sequencediagram.org/
fl0id 4y ago
Why are you not using mermaid-js?
fl0id 4y ago
Do you know about mermaid-js?
michaelsalim 4y ago
Fully agree with the problem the article says. This is why I also built Recall [1] (shameless plug). 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! [1] https://recalllab.com https://recalllab.com
lbriner 4y ago
I'm not sure I understand the underlying problem being that most tools are too mouse intensive, for me, the issue is that there are shortcomings that make it so that you need to use the mouse a lot and which don't need to be solved with a keyboard. 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.
trhway 4y ago
I let my wife who is almost 2 times smaller than me to train her jiu-jitsu skills on my hands at moderate force/speed/pain - works like a strong massage/stretch for the joints and any carpal-tunnel like discomfort (more than 30 years with mouse&keyboard) is gone :)
chillingeffect 4y ago
Looking fwd to this. Labview, a type of flowchart-editor, literally ruined my index finger! My suggestion: many keyboard shortcuts.
Aaronontheweb 4y ago
https://www.smartdraw.com/ https://www.smartdraw.com/ - SmartDraw has done this for about 20+ years. I can draw entire flowcharts using keyboard shortcuts (although I still have to click a button for split paths) and everything is automatically spaced correctly / adaptively even if I delete shapes. The other chart types I use this for are org charts, mind maps, and network diagrams which are all similarly automated.
hdjjhhvvhga 4y ago
The tool is neat, it just lacks arrows and shapes (like diamonds for decisions etc.).
- escot 4y ago
  Arrows will come. Shapes I'm still figuring out because I don't want it to interfere with the keyboard-centric ux it has right now. It helps to have all nodes be the same shape/size. But there may be some wiggle room to add simple shapes, like rects with a corner taken out etc.
stackedinserter 4y ago
A couple of relevant links: - If you draw a lot of sequence diagrams, this one is a feature-rich type-to-diagram life saver: https://sequencediagram.org https://sequencediagram.org - For component/architecture diagrams: https://diagrams.mingrammer.com https://diagrams.mingrammer.com
frozencell 4y ago
It would be cool to have a flowchart generated from a codebase, automatically.
JohnHaugeland 4y ago
I use source-based instead. GraphViz is a traditional choice: https://dreampuf.github.io/GraphvizOnline/#digraph%20G%20%7B%0A%0A%20%20Hello%20-%3E%20HN%3B%0A%20%20%0A%7D 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.html?s=BIUwNmD2AEC0B81gDkDcQ https://stonecypher.github.io/jssm-viz-demo/graph_explorer.h...
dan-robertson 4y ago
The discussion of the keyboard editing interface (and of editing bulleted lists) reminds me of this, which is about having enter do intuitive things in a text editor: https://discuss.prosemirror.net/t/backspace-and-enter-and-delete-i-guess/57 https://discuss.prosemirror.net/t/backspace-and-enter-and-de...
earth_walker 4y ago
I really like what you've done here, and I think it has broader applicability as an input/editing mode for all sorts of graph-like information. 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?
- escot 4y ago
  I could see adding support for exporting to csv. I’ll if there are any standards to follow.

486 points by escot 4y ago

This is cool. Being afk right now, I initially thought i couldn't use it on mobile but the menus and icons saved me. 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.

nmstoker 4y ago
I suppose tweaking the menu/ icon sizes when it's recognised as being in a mobile browser might be an idea (or at least something to let the user toggle to/from slightly more mobile friendly sizing of icons) would be handy

tylergetsay 4y ago

Shoutout to code2flow.com for another solution

oftenwrong 4y ago

I have started using mermaid to create flowcharts. It lets me break free from having to think about layout entirely. Plus, I can use my favourite text editor. https://github.com/mermaid-js/mermaid https://github.com/mermaid-js/mermaid

sbelskie 4y ago
I really like mermaid but I have found larger flow charts often make odd rendering decisions (especially with sub graphs). Otherwise it’s incredible.
- ta988 4y ago
  Graph layout is extremely complex and there is no good automated way to do it yet (or ever). Even specialized software like plantuml, cytoscape or gephi (depending on the kind you want to do) struggle on some graphs that a human can layout decently well by hand.
  - zamadatix 4y ago
    Coming from the computer networking space this is somewhere I've been hoping to see a big machine learning splash like language translation has seen since large network graphs are either a big ball of mess or out of date because it takes too much human time to keep up to date. 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.
deleted 4y ago
[deleted]
Kerrick 4y ago
The tool from TFA also breaks the user free from thinking about layout entirely, and can export to Mermaid. It's a pretty fancy-looking way to _quickly create_ a graph that I plan to try instead of manually typing Mermaid syntax next time I need to make one.

smitty1e 4y ago

Graphviz? https://sketchviz.com/flowcharts-in-graphviz https://sketchviz.com/flowcharts-in-graphviz

Groxx 4y ago
http://webgraphviz.com http://webgraphviz.com + add an on-key-up event to the text area that clicks the button = my favorite graphviz editing experience. 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.

cjlm 4y ago

flowchart.fun [0] may scratch the same itch – I just interviewed the sole developer [1] 0: https://flowchart.fun/ https://flowchart.fun/ 1: https://sourcetarget.email/editions/43 https://sourcetarget.email/editions/43

butwhywhyoh 4y ago

Since all of the other comments are just people pasting links to their personal favorite thing that is tangentially related, let me be the first to say that this looks fantastic. I often run into the same frustrations that you're attempting to solve here, and for a demo version it looks like its in great shape. I will likely try to use this at work this week to take it for a test drive.

deleted 4y ago
[deleted]
escot 4y ago
I'm happy to hear it, let me know how it goes!

zamadatix 4y ago

I tried this out for a bit and it was definitely interesting. For flowcharts that are closer to a pure tree it's blazing fast and simple to work with, more than anything else I can remember trying. Though for more complicated flowcharts that break out and remerge it can be very confusing to both edit or read. If the the tree-style or pure linear is more your use case I highly recommend trying it out despite its demo state, even if just to export the topology into a tool that will draw it fancier if this isn't "wowing" you on the looks side of things. 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.

escot 4y ago
In terms of the lines crossing, you’re right I have to work on the algo. It’s just not been something I prioritized because its not often a problem until you get into larger graphs. 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.

layer8 4y ago

I like UML activity diagrams, which let you express data flow as well as control flow, and also asynchronous activities with fork/join and events, among other things. See for example https://www.visual-paradigm.com/guide/uml-unified-modeling-language/what-is-activity-diagram/ https://www.visual-paradigm.com/guide/uml-unified-modeling-l....

chris_wot 4y ago

Graphviz has a syntax for directed graphs, it’s fairly intuitive. Not sure why it couldn’t have a text box on one pane and an immediate graphical view on the other. I’d definitely be interested in that!

escot 4y ago
Someone made a web version of what you’re describing: https://dreampuf.github.io/GraphvizOnline https://dreampuf.github.io/GraphvizOnline

drdude 4y ago

PlantUML is my favorite... but it is all texual. There is a great support for it on VSCode and Emacs for previews. I prefer VSCode to create my UML diagrams and Gantts (even though I am mainly Emacs)

iLoveOncall 4y ago
Being all textual is a feature, you can put it in your VCS for example. Just for that reason it's infinitely better than any other solution.
- drdude 4y ago
  I strongly agree. I only mentioned "but it is texual" because it looked like that the author likes GUI-based one.
  - escot 4y ago
    Knotend now can export to PlantUML

phailhaus 4y ago

Love this. I think we are missing a UI paradigm for visualizing and editing graphs effectively, and I love seeing stabs at the problem. It is absolutely insane that dependency graphs aren't a first-class feature in all issue trackers. The fact that graph visualizers are so complex is probably a big part of it. I'm a fan of your approach because it's reusing familiar UX patterns that people already know, like making nested lists. 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.

escot 4y ago
I’m still playing around with allowing the keyboard shortcuts to take effect even when editing a node. At the moment they conflict, like the option- prefixed ones. But I agree it could be nice to find a fluid way of doing it because it means fewer keystrokes.
- escot 4y ago
  Ok, I fixed this. You can now Tab (etc) while editing a node to add a new node.

keithnz 4y ago

while I like the user interaction, and while diagramming tools really do need this kind of quick way of creating diagrams, at the moment, this tools end result is not really that nice for doing flowcharts, and looking through the examples there really is nothing compelling, and some of the examples seem a bit odd ( like the onboard customer example). As this demo gets expanded, it will be interesting to see if it can stay simple as things like conditional paths / loop back mechanisms are created. If that's not the intention, then this is more of a tree builder than a flowchart editor. A simple example I'd like to see is a flow chart for traffic lights / pedestrian crossing control system.

escot 4y ago
Right now its geared towards right-to-left directed graphs. Probably because most of my use cases have to do with time (like project timelines). So the state machine you mention towards the end isn't an immediate goal because a) it probably needs nested states, and b) it probably has tons of cycles which knotend doesn't do great at the moment.

stevage 4y ago

I love the goals here, and this can definitely work. 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.

woleium 4y ago
Disagree with tab for new item, as this is how you enter data horizontally in consecutive spreadsheet cells. Agree with other comments tho :)
- sleet 4y ago
  and tab is used to add a new post it notes in Miro (when another post it note is active)

bmitc 4y ago

> After dragging around boxes for a few minutes you need to take a break and ice your wrists. It's just too slow, there's too many micro-interactions, and it distracts you from what matters most: defining your dependencies. 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?

deleted 4y ago
[deleted]
yjftsjthsd-h 4y ago
I wonder if gaming uses a different (smaller) movement range than "serious" applications?
- makeitdouble 4y ago
  I'd expect gamers to be serious about their setup and adjust it to fit their body at best: mouse size, weight, buttons arrangement etc. same for the keyboard. Also gaming gear is usually better in almost every dimension. 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.
  - hhh 4y ago
    It’s more about consistency. Whatever is comfortable comes first, and should be done at the same time as finding what works (i.e. is good hardware: good sensors, keyboards (and with newer custom boards some have strange firmware latencies likely related to denouncing(see the gmmk pro.)) 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. :)

zelphirkalt 4y ago

I once used a tool called "PAP Designer" ("Programm AblaufPlan" Designer), which had a great system for allowing you to put new boxes. But I am not sure it still exists and fullfils the all needs, as a plain flow chart might not be all you need. You might want to add comment boxes and stuff. Otherwise I usually use yEd Graph Editor and haven't found anything better and lightweight yet.

d0mine 4y ago

Another keyboard-friendly way to edit graphs is Org mode in Emacs e.g., org-brain https://kungsgeten.github.io/org-brain.html https://kungsgeten.github.io/org-brain.html

ryanmcbride 4y ago

I just use a pen and notebook and take a picture with my phone to share it. No software has ever been able to let me switch between drawing boxes, drawing arrows, and writing text as quickly and accurately as I can with a pen.

toomanydoubts 4y ago

This is cool, but I've given up on visual editors for graphs long ago. Graphviz and, more recently, mermaidjs, have been very useful for me for all my diagram needs.

hellohowareu 4y ago

Try Mermaid. It's a pleasant experience. And it can be used as a stand alone diagram editor, or integrated with software programs. https://mermaid-js.github.io/mermaid/#/ https://mermaid-js.github.io/mermaid/#/

Kerrick 4y ago
The tool from TFA can export to Mermaid. I've used Mermaid to lay out some DAGs to visualize prerequisites & parallelizable tasks in large projects, and it certainly isn't as fast to use as Knotend seems it'd be.
- Hnrobert42 4y ago
  Whoa! No need for such hostility.
- aloisdg 4y ago
  What is TFA and DAG? 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.
  - zvr 4y ago
    TFA is "The Fine Article"; essentially this HN submission. DAG is "Directed Acyclic Graph"; a graph with directed edges and no cycles.
    - aloisdg 4y ago
      Thanks. I open an issue in the list of acronyms I maintained: https://github.com/d-edge/foss-acronyms/issues/55 https://github.com/d-edge/foss-acronyms/issues/55
solatic 4y ago
Mermaid is more of a WYSIWYM tool where Knotend is more WYSIWYG. WYSIWYM tools are quite valuable in the right contexts, but there's a reason why LaTeX never really threatened Microsoft Word.

noizejoy 4y ago

First of all, I really like the concept of grid based flow charting. It's one of the popular metaphors used in "wiring" software based musical instruments and effects and works really well for a significant percentage of signal flows that don't have too many back looping or crossing virtual wires. 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)

mushbino 4y ago
It's interesting to see this perspective. My experience with canvas-based flow charting applications shows that users prefer the horizontal left-to-right flow. The ability to shift drag the canvas usually makes horizontal scrolling a lot easier. I believe it's mostly due to the fact that people find writing to be the closest metaphor. It is expected that adding a new node or step will appear to the right of the current one. However, I think more research and experimentation are needed.
- ReactiveJelly 4y ago
  But as the length of a written document goes toward infinity, whether the document is prose or code, it ends up going down. 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.
  - mushbino 4y ago
    For sure, what you're saying is true, but I suppose it depends on the content, layout, and how it's used. Vertical is typically better when first word type scanning is important, like data tables or anything similar. Horizontal scrolling in data tables is something I hate with a fiery passion and do everything I can to avoid, for example. When a workflow or series of interconnected elements are what's important than horizontal tends to work better for how people think about those things, imo, but there are exceptions to every rule. Basically, it just depends.

solraph 4y ago

Had a play with it, and it has great promise. I love that the keyboard interface is given priority. 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.

escot 4y ago
Thanks! > 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.

irjustin 4y ago

FWIW, I 'whiteboard', flow chart and everything using google Sheets. 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.

escot 4y ago
This is exactly how I prototyped knotend. For some use cases just a spreadsheet is great.

alexalx666 4y ago

This is web 4.0, zero bloat

escot 4y ago

Hey all, author here. Graphs are used for tons of purposes across a lot of disciplines, but we don't have a fast general-purpose graph editor. That's what I'm trying to do with knotend [0]. It's a keyboard-driven directed graph editor. I made it for myself for planning project dependencies. It's also a great tree editor. 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 https://www.knotend.com - [1] https://news.ycombinator.com/item?id=27256861 https://news.ycombinator.com/item?id=27256861 - [2] https://www.knotend.com/waitlist https://www.knotend.com/waitlist

gertlex 4y ago
I really enjoyed the few minutes I spent with it, and I've got it bookmarked for the next time I want to visualize a large number of tasks and requirements! Your described use case of "project tasks dependencies" particularly struck a note in my head. 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 ;)

nikolay 4y ago

You should offer invites to HN users.

escot 4y ago
Absolutely. Most traffic today will be from HN so I'll give preference if you join yesterday/today: https://www.knotend.com/waitlist https://www.knotend.com/waitlist
- nikolay 4y ago
  Of course I did sign up when you posted it, but still no invite yet.
  - escot 4y ago
    Added you. Look for an email from scott@knotend.com
    - nikolay 4y ago
      Nice! I'm in! Looks great! I will provide feedback! Thank you so much!
      - escot 4y ago
        Email anytime :)

Aeolun 4y ago

You may want to have a look at Terrastruct, which recently released text based auto layed out graphs as well.

aaronwalker 4y ago

Great idea, It’d be even better if you could add functionality for more complex diagrams, like what draw.io offers. In my OOP classes for every project I’d be assigned to upload a UML diagram, which is incredibly tedious to do with drag and drop software, especially for large projects. If this keyboard shortcut flowchart editor could support UML diagrams this would have saved me a lot of time!

urlwolf 4y ago

This feels really good. 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 :)

escot 4y ago
I'd like to add some kind of computational support, and you're right that probability fits pretty naturally. Do you know of any other tools I can take hints from? Or any domains/disciplines that need this?

__MatrixMan__ 4y ago

I like it. I wish it could export Airflow DAGs so all I had to do was fill in the interesting parts.

escot 4y ago
Do you know of any tools that export to airflow? I’d be happy to implement it. Would you want to write python code in the nodes, or just the names of functions (or modules)?

Sophistifunk 4y ago

Why do we need a good user interface for editing dependency graphs which are generated, not drawn?

neoberg 4y ago
Because they are not always generated.

baalimago 4y ago

For me, the lack of speed in creating the dependency graph has never been an issue. The issue when it comes to flowcharts has primarily been creating the correct scope for the particular task, to have the right visualization tools to display my intent and to fill the chart with relevant information. When I have tools all of this, a high amount of conceptual information can be baked into a small and easy-to-access space. In my experience, "all" the info is very rarely required (which the speed-dependency-chart implies), since very few can process it anyways. I'll be sticking to Miro.

michaelsalim 4y ago
Do you have a strategy for that? I do have the same issue sometimes.
- baalimago 4y ago
  No specific strategy, I'm still trying to figure out what makes some diagrams better than others, and how to design diagrams which "works". The one I've used which have gotten the most spread in the company I'm working at were is one which mapped the transformation of a specific state in the microservice architecture. The state in question is highly central to our products success, and it reflects many (but not all) the relations between services. The dataflow were from leaf entrypoints, through processing, and finally stopped at internal consumer endpoints. The result is a reversed tree structure where each node is a microservice/external service (text in node explains which one, and linked to gitlab project) and each edge said which protocol is used for them to communicate. So, it reflects what services are required for a specific customer, depending on which path the customer takes in order to produce this state for internal consumers. Doing this enabled us to also analyze the "hot path", and "cold path" to know what services were problematic (rarely used/overused/too poorly written considering their importance/etc) and not. 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.

Aeolun 4y ago

Would it be possible to not transform my browser history into an undo/redo graph?

Falkon1313 4y ago

That looks nice, for really simple things. 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.

michaelsalim 4y ago
There's plenty of place where graph representations are great. First thing that comes to mind is git history. Another is shader nodes. 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. [1] https://recalllab.com https://recalllab.com

throwaway14356 4y ago

(in on a phone atm) the example video needs enough complexity to make it worth using the tool. Its simple enough to understand that i think you can do the full tutorial as the demo.

mattewong 4y ago

if you can combine this with cloud services (for example, each node is an S3 bucket or a lambda function) and now we're cookin with gas

escot 4y ago
Are you thinking of AWS step functions? They have a json format I could possibly export to but I haven’t looked deeply into it.

squiddle 4y ago

Look into Flying Logic for a very efficient visual diagramming UX. https://flyinglogic.com/ https://flyinglogic.com/

cher14 4y ago

Breakdown notes also comes with some helpful keyboard shortcuts to not use the mouse as much. This was added not so much for flowcharts, but to make it easier to write notes quickly. -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/make/load/hotkeys https://www.breakdown-notes.com https://www.breakdown-notes.com

tbdr 4y ago
@cher14 best way to contact you ? info@ bounces back :(

abhimskywalker 4y ago

Over last 10 years have used Freemind & (last few years) Xmind to kind of make superfast flow charts in the tools dressed as mindmap tools. So i can see the appeal of knoted here for quick jotting down of thought flows. 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 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.

progx 4y ago
Mermaid? I like mermaid, but it is not fun, it is not fast and it is not comfortable, especially when you have bigger diagrams or must edit them.

praptak 4y ago

I want a flowchart editor which doesn't give me carpal tunnel but I also want (some) control over the layout. 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.

eigilsagafos 4y ago

Co-Founder of ShiftX here. We are building a flowchart/BPM/knowledge-graph hybrid. We also use a grid and support splits/loops/joins in a way where we try to optimize for readability. Feel free to try: https://shiftx.com https://shiftx.com. Feedback welcome!

Terry_Roll 4y ago

No, you need the lightest wired optical tracking mouse you can buy which is the right size for your hand to rest on. Forget wireless mice with the added weight of batteries, these will increase your carpal tunnel syndrome!

tolai 4y ago

I REALLY like this!!

hkon 4y ago

Yes, not a flowchart, but I like the concept implemented at https://sequencediagram.org/ https://sequencediagram.org/

fl0id 4y ago

Why are you not using mermaid-js?

fl0id 4y ago

Do you know about mermaid-js?

michaelsalim 4y ago

Fully agree with the problem the article says. This is why I also built Recall [1] (shameless plug). 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! [1] https://recalllab.com https://recalllab.com

lbriner 4y ago

I'm not sure I understand the underlying problem being that most tools are too mouse intensive, for me, the issue is that there are shortcomings that make it so that you need to use the mouse a lot and which don't need to be solved with a keyboard. 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.

trhway 4y ago

I let my wife who is almost 2 times smaller than me to train her jiu-jitsu skills on my hands at moderate force/speed/pain - works like a strong massage/stretch for the joints and any carpal-tunnel like discomfort (more than 30 years with mouse&keyboard) is gone :)

chillingeffect 4y ago

Looking fwd to this. Labview, a type of flowchart-editor, literally ruined my index finger! My suggestion: many keyboard shortcuts.

Aaronontheweb 4y ago

https://www.smartdraw.com/ https://www.smartdraw.com/ - SmartDraw has done this for about 20+ years. I can draw entire flowcharts using keyboard shortcuts (although I still have to click a button for split paths) and everything is automatically spaced correctly / adaptively even if I delete shapes. The other chart types I use this for are org charts, mind maps, and network diagrams which are all similarly automated.

hdjjhhvvhga 4y ago

The tool is neat, it just lacks arrows and shapes (like diamonds for decisions etc.).

escot 4y ago
Arrows will come. Shapes I'm still figuring out because I don't want it to interfere with the keyboard-centric ux it has right now. It helps to have all nodes be the same shape/size. But there may be some wiggle room to add simple shapes, like rects with a corner taken out etc.

stackedinserter 4y ago

A couple of relevant links: - If you draw a lot of sequence diagrams, this one is a feature-rich type-to-diagram life saver: https://sequencediagram.org https://sequencediagram.org - For component/architecture diagrams: https://diagrams.mingrammer.com https://diagrams.mingrammer.com

frozencell 4y ago

It would be cool to have a flowchart generated from a codebase, automatically.

JohnHaugeland 4y ago

I use source-based instead. GraphViz is a traditional choice: https://dreampuf.github.io/GraphvizOnline/#digraph%20G%20%7B%0A%0A%20%20Hello%20-%3E%20HN%3B%0A%20%20%0A%7D 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.html?s=BIUwNmD2AEC0B81gDkDcQ https://stonecypher.github.io/jssm-viz-demo/graph_explorer.h...

dan-robertson 4y ago

The discussion of the keyboard editing interface (and of editing bulleted lists) reminds me of this, which is about having enter do intuitive things in a text editor: https://discuss.prosemirror.net/t/backspace-and-enter-and-delete-i-guess/57 https://discuss.prosemirror.net/t/backspace-and-enter-and-de...

earth_walker 4y ago

I really like what you've done here, and I think it has broader applicability as an input/editing mode for all sorts of graph-like information. 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?

escot 4y ago
I could see adding support for exporting to csv. I’ll if there are any standards to follow.