3 ms·

Show HN: Flostep – Diagrams people can actually walk through

27 points by pandurang90 1mo ago

pandurang90 1mo ago
[flagged]
qwertytyyuu 1mo ago
This looks pretty! Looks to be really good for presentations
- pandurang90 1mo ago
  Thank you! Presentations are actually one of the strongest use cases, being able to walk an interviewer or stakeholder through a system one interaction at a time, rather than pointing at a static blob of boxes and arrows. Would love to know what you'd use it for specifically — system design interviews, team demos, something else?
_lex 1mo ago
Your order flow has an issue where it's possible for someone to pay for something and not get it. You can either fix this or you might be able to use it to show the value of your product that somebody could see the bug by stepping through your diagram
- pandurang90 1mo ago
  Great catch and honestly a perfect demonstration of exactly what Flostep is for. The payment flow on the site is a simplified demo diagram. But you're absolutely right that stepping through a diagram like this is one of the best ways to catch edge cases before they become bugs, that's one of the core use cases we see. Would love to know: is this something you'd use in PR reviews to catch issues like this early?
  - setr 1mo ago
    It’s hard to imagine someone creating these for PRs? Unless it was auto-generated, but even then it’d only be relevant for fairly large/novel PRs — and then it’s functionally the same as documentation use case. You’d also probably need some mechanism to visually diff the flowcharts to participate in discussions/changes
    - pandurang90 1mo ago
      [dead]
oivaksef 1mo ago
Really nice, i'd like to use this, and if the license was right probably would if it was OSS. I think closed source service stuff like this was long over before LLMs came along. Now it's like, I can take a few screenshots and make this myself. At least with open source YOU the developer get to carry on being in the conversation and co-develop, rather than giving ideas to others and being left out
btreecat 1mo ago
Online only diagrams is a hard no for me. I'd rather commit the mermaid and render a png and share that then have another issue with seats/license for critical documentation.
- pandurang90 1mo ago
  I understand concern behind online only. But, there is also an option to download it as static image. Does it solve the issue for you?
  - btreecat 1mo ago
    With the increased instability of global infrastructure, being able to edit locally is critical IMO. Others may feel different.
mohanz 1mo ago
It's pretty neat. Is there any way for me to share a doc to my agent and let it help me with creating diagrams?
- pandurang90 1mo ago
  Yes, You can use MCP. Here are more details https://flostep.dev/guides/mcp https://flostep.dev/guides/mcp
dinglidingli 1mo ago
This is really beautiful, but like others said, being online only is a bit disappointing (though understandable). Are there any plans for extensibility in the future?
- pandurang90 1mo ago
  I understand concern behind online only. But, there is also an option to download it as static image. Does it solve the issue for you? On extensibility, genuinely open to hearing what you'd want. What would "extensible" look like for your workflow specifically?
  - dinglidingli 1mo ago
    Static images are fine, but you lose the benefit of interaction particularly when presenting. Wifi isn't always available so it's nice when the user can have a fallback compiled HTML to use. As for extensibility - I understand that your focus is system design, but I don't really see any reason for this to not be more broadly available for any sort of process design, particularly for use as a UX tool or in the product ownership space for understanding how systems and physical processes might be interconnected. I see that you can add any custom node in the code, and they just get a little gear icon, but it would be nice if the user could define the nodes themselves, add meta data, conditionals, loops etc. I've been using BPMN for years but I'd be lying if I said it wasn't outdated and a pain to present to people.
    - pandurang90 1mo ago
      Yes, we are working on some updates on that section. Thanks for highlighting it. Also you can change the icon by clicking on it. There are different icons available.
drfloyd51 1mo ago
This looks like a sequence diagram than has been extended from a 2d graph to 3d with the 3rd d being “time” that you step through with a button. You could render this interactive diagram as a static sequence diagram quite easily. And then see all the relations in full glory at one time.
- pandurang90 1mo ago
  Yes, there is an option on top left in canvas already to visualise the diagram with 2 views - Sequence and flow.

27 points by pandurang90 1mo ago

pandurang90 1mo ago

[flagged]

qwertytyyuu 1mo ago

This looks pretty! Looks to be really good for presentations

pandurang90 1mo ago
Thank you! Presentations are actually one of the strongest use cases, being able to walk an interviewer or stakeholder through a system one interaction at a time, rather than pointing at a static blob of boxes and arrows. Would love to know what you'd use it for specifically — system design interviews, team demos, something else?

_lex 1mo ago

Your order flow has an issue where it's possible for someone to pay for something and not get it. You can either fix this or you might be able to use it to show the value of your product that somebody could see the bug by stepping through your diagram

pandurang90 1mo ago
Great catch and honestly a perfect demonstration of exactly what Flostep is for. The payment flow on the site is a simplified demo diagram. But you're absolutely right that stepping through a diagram like this is one of the best ways to catch edge cases before they become bugs, that's one of the core use cases we see. Would love to know: is this something you'd use in PR reviews to catch issues like this early?
- setr 1mo ago
  It’s hard to imagine someone creating these for PRs? Unless it was auto-generated, but even then it’d only be relevant for fairly large/novel PRs — and then it’s functionally the same as documentation use case. You’d also probably need some mechanism to visually diff the flowcharts to participate in discussions/changes
  - pandurang90 1mo ago
    [dead]

oivaksef 1mo ago

Really nice, i'd like to use this, and if the license was right probably would if it was OSS. I think closed source service stuff like this was long over before LLMs came along. Now it's like, I can take a few screenshots and make this myself. At least with open source YOU the developer get to carry on being in the conversation and co-develop, rather than giving ideas to others and being left out

btreecat 1mo ago

Online only diagrams is a hard no for me. I'd rather commit the mermaid and render a png and share that then have another issue with seats/license for critical documentation.

pandurang90 1mo ago
I understand concern behind online only. But, there is also an option to download it as static image. Does it solve the issue for you?
- btreecat 1mo ago
  With the increased instability of global infrastructure, being able to edit locally is critical IMO. Others may feel different.

mohanz 1mo ago

It's pretty neat. Is there any way for me to share a doc to my agent and let it help me with creating diagrams?

pandurang90 1mo ago
Yes, You can use MCP. Here are more details https://flostep.dev/guides/mcp https://flostep.dev/guides/mcp

dinglidingli 1mo ago

This is really beautiful, but like others said, being online only is a bit disappointing (though understandable). Are there any plans for extensibility in the future?

pandurang90 1mo ago
I understand concern behind online only. But, there is also an option to download it as static image. Does it solve the issue for you? On extensibility, genuinely open to hearing what you'd want. What would "extensible" look like for your workflow specifically?
- dinglidingli 1mo ago
  Static images are fine, but you lose the benefit of interaction particularly when presenting. Wifi isn't always available so it's nice when the user can have a fallback compiled HTML to use. As for extensibility - I understand that your focus is system design, but I don't really see any reason for this to not be more broadly available for any sort of process design, particularly for use as a UX tool or in the product ownership space for understanding how systems and physical processes might be interconnected. I see that you can add any custom node in the code, and they just get a little gear icon, but it would be nice if the user could define the nodes themselves, add meta data, conditionals, loops etc. I've been using BPMN for years but I'd be lying if I said it wasn't outdated and a pain to present to people.
  - pandurang90 1mo ago
    Yes, we are working on some updates on that section. Thanks for highlighting it. Also you can change the icon by clicking on it. There are different icons available.

drfloyd51 1mo ago

This looks like a sequence diagram than has been extended from a 2d graph to 3d with the 3rd d being “time” that you step through with a button. You could render this interactive diagram as a static sequence diagram quite easily. And then see all the relations in full glory at one time.

pandurang90 1mo ago
Yes, there is an option on top left in canvas already to visualise the diagram with 2 views - Sequence and flow.