Hacker News Reader

I learnt about mermaid [0] literally yesterday.

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...

My feedback: I don't like when web apps override default browser right-click behavior. I understand why you did it, and it seems reasonably well implemented, but it's still a peeve of mine.

I tried to not override default behavior as much as possible. Maybe I can find a way around this one too. I just found that people naturally right clicked on nodes to do various actions because they're used to doing it in google sheets, docs, etc.

Don't try to work around it. If you found in your user studies that people wanted to use right click, you'll be inconveniencing the majority if you remove that behavior. Speaking for myself, I get mildly frustrated when a web app doesn't give me a custom right click menu, because discovering whatever they chose instead is much harder.

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.

Thanks for the feedback. I ended up having shift-right-click do the default behavior of right-click so atleast theres a workaround.

I'm the opposite. Shift-right-clicking when I need to access the default behavior is not a big deal, and right clicking is such a natural instinct for me that I love it when web apps support it.

Hey, really cool idea! Would love to see this fleshed out more.

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!

Thanks for your feedback solardev!

> 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!

Update: I implemented export to PlantUML

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 ;)

I agree there's no one tool for all possible diagramming cases. Knotend actually isn't geared towards making highly pretty graphs since it uses autolayout. It's specifically for fast editing of a structured graph. For example there's no way to have a dangling edge to nowhere. I personally like this because it was the main pain point I felt with miro, lucid, etc. and I want to continue down the path of what we can do if we have a super fast editing experience for structured directed graphs (eg, could you export this to another tool that consumes it and does some computation).

Great work - this is badly needed.

> 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...

Thank you! I made a mistake here by making the keyboard shortcuts a little too sparse on info. I like how some other tools show a little visualization of the key + words describing it. I'll work on it.

Nice work! If it will support ASCII export I may stash one of my side projects forever :)

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.

Thanks. If you have any more specifics on accessibility I'd appreciate it. I'd like knotend to be usable 100% from the keyboard, and eventually via screen reader.

Post your side project!

Haha, it's nowhere near ready for usage by anyone at this point, not even myself.

If it ever becomes worthy of your time I'll put it on https://withoutdistractions.com and add a separate reply here :)

I'd like to (optionally) see an arrow direction on edges. Most of the graphs I work with are directional. If I drag to try and create a back edge, it doesn't seem to care about direction and just assumes everything is left->right.

+1 for arrows. Since the edges are directed I like the option (maybe default?) to render the edges as arrows. The flows just reads better in that way.

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 agree, it's needed. It is one of several reasons that I need to rewrite the layout algo for both better positioning of nodes and edges (which makes drawing the arrow heads simpler since they won't overlap each other). In terms of back/forwards arrows -- the lines should be rendered differently if they are going from right to left (with a dashed line).

This is cool.

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?

> grid provides keyboard nav

Yep thats a critical piece

Great work!

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 ÑÃÕ.

Im working on this…its tough. I noticed several webapps make this mistake, like Miro. I think something clever is required since google sheets gets it right.

It would be nice to have a few template graphs to help us understand the end result (and learn how to edit graphs).

I love how you can use the tools without first giving any information about you.

Checkout the 'Examples' in the top menu.

This is a really fine onboarding experience. I love your approach.

tiny thing: typo in one of the Example's title: algroithm -> algorithm

Thanks! fixed.