Styling Flowcharts Using CSS

by tonerow on 7/18/2023, 1:15:43 PM with 23 comments

  • by pier25 on 7/18/2023, 4:57:52 PM

    Lately for flowcharts I've been using Figma's Figjam.

    https://www.figma.com/figjam/

    It's really an amazing tool. It's like a whiteboard that allows you to describe processes in different ways with contextual information (images, links, bits of code, etc). I've been working on a complicated feature for my current project and it has been invaluable.

    The only thing I'm missing is really a way to describe database models with relationships.

  • by superasn on 7/18/2023, 3:01:07 PM

    I love your landing page by the way. It explains the app while giving a playground/demo at the same time. This is a very cool way to showcase your site. Well done!

  • by tomhallett on 7/18/2023, 3:12:32 PM

    Flowchart.fun looks very very cool. Solves many problems I've faced with existing tools.

    Has anyone used flowchart.fun for "architecture" diagrams? Which are similar to flowchart/mindmaps, but a bit different.

    I'm trying to make something like this webapp diagram, but struggling: https://bezkoder.com/wp-content/uploads/2020/03/react-node-e...

  • by jimmychoozyx on 7/18/2023, 3:12:58 PM

    Very nice! I was looking for something like this-- A diagramming tool with plain ol' css.

    Given the features I think it's a nice step up (flowchart.fun is $3/month) from an Open Source diagram tool like MermaidJS [1].

    One suggestion: a link to the diagram-coding docs from the editor.

    [1] Here's an example of how MermaidJS styles a flow chart:

    https://mermaid.js.org/syntax/flowchart.html#styling-a-node

  • by Jowsey on 7/18/2023, 6:45:43 PM

    This site got me through college, made making flowcharts bearable for me :)

  • by intended on 7/18/2023, 7:54:34 PM

    This is very neat.

    I’m trying to figure out if you can embed the flow chart builder itself into a post/site.

    I can imagine for some more complex topics, people would like to be able to move things around/play with the design.

  • by ikesau on 7/18/2023, 7:23:48 PM

    love flowchart.fun! it's still the quickest and easiest tool i've found to quickly put diagrams together. it continues to show that clearly a lot of thought has gone into the ergonomics : )

  • by galaxyLogic on 7/19/2023, 12:06:02 AM

    Do you use flowcharts more to design programs, or to document them?

    When I learned programming the idea was first draw a flowchart, then code it. I wonder if anybody does that any more.

  • by joelsrubin on 7/19/2023, 12:33:56 AM

    Another smash success from my friends @ tone row

  • by rodrigobellusci on 7/18/2023, 2:30:30 PM

    I've wanted an app like that for a long time!

  • by rayshan on 7/19/2023, 12:19:11 AM

    Second and third examples produce errors:

    No such layout `elk` found. Did you forget to import it and `cytoscape.use()` it?

  • by jeanphillej on 7/18/2023, 9:40:48 PM

    You app is awesome. I hope you can keep working on it forever ;)

  • by Zekio on 7/18/2023, 6:26:25 PM

    after Github got support for mermaidjs charts in markdown, I've not looked back