from Hacker News

Show HN: Knotend – a keyboard-driven flowchart editor

by escot on 1/26/23, 3:49 PM with 19 comments

Hey all, I made knotend [0] because I wanted a flowchart editor that was keyboard-driven and super fast. I was tired of dragging boxes around on a canvas. You may have seen knotend around here before when I wrote an initial blog post [1] about why I wanted a new kind of flowchart editor. Thank you to everyone who has given me feedback here on HN!

Since that blog post I’ve been working hard to get to a v1 which I’m showing now. You can use the free version without having to sign up for an account. I would love your feedback!

What makes knotend different is two main things: 1) The nodes are constrained to a grid which enables a keyboard-centric experience for selection and navigation, and 2) there’s autolayout so each time you add a node, the graph automatically lays itself out and places each node in a cell.

In the future I’ll be working on supporting more complex editing actions, linking graphs together, collaboration, and more.

Please drop your feedback below, reach out on twitter [2], or email scott@knotend.com.

[0] https://www.knotend.com

[1] https://www.scottantipa.com/why-knotend

[2] https://twitter.com/ScottyAntipa

  • by dang on 1/26/23, 10:22 PM

    Related:

    Show HN: Direct manipulation flowchart editor without the mouse - https://news.ycombinator.com/item?id=27256861 - May 2021 (19 comments)

    Knotend - https://news.ycombinator.com/item?id=27049539 - May 2021 (1 comment)

    Show HN: A keyboard-centric flowchart editor - https://news.ycombinator.com/item?id=27037432 - May 2021 (1 comment)

  • by vilkkala on 1/27/23, 4:15 AM

    I use Mermaid to visualize all sorts of processes, so this is very interesting.

    Some immediate feedback:

    - ability to name the node ID, because now the Mermaid output is hard to read and edit

    - more shapes (diamond, circle, etc.)

    - text on connection

    - shortcut to connect with a node after one is staged for connection (didn't find one at least)

    - ability to select connections with keyboard

    - shortcut to delete the selected connection (now you need to click Disconnect, the shift+delete doesn't seem to work)

    The layout gives me Excel vibes: what if these nodes could export values and do computation? Like, the Apple Income Statement example, but dynamic. This combined with an ability to export a snapshot as a Mermaid diagram, it would be great to explain business cases, etc.

  • by s1mon on 1/27/23, 1:35 AM

    A "flowchart" is an ANSI/ISO standard which looks really different than this. [0] Why call it a flowchart when it's not a flowchart? It's really confusing and not helping your marketing.

    [0] https://en.wikipedia.org/wiki/Flowchart

  • by pouyarad_ on 1/26/23, 10:14 PM

    This is awesome. I find myself avoiding Miro/Figjam these days because of how much point & clicking and formatting I need to do to get a flowchart going.

    Would love to eventually have functionality with this to create UML or system architecture diagrams.

    Props for setting up monetization from the get-go and having a super simple UI.

  • by chezsoi on 1/26/23, 9:27 PM

    Very cool, any plans to export to an open format like Mermaid?

  • by blondin on 1/26/23, 3:57 PM

    this is super cool!