from Hacker News

Styling Flowcharts Using CSS

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

• by pier25 on 7/18/23, 4:57 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/23, 3:01 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/23, 3:12 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/23, 3:12 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/23, 6:45 PM

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

• by intended on 7/18/23, 7:54 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/23, 7:23 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/23, 12:06 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/23, 12:33 AM

  Another smash success from my friends @ tone row

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

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

• by rayshan on 7/19/23, 12:19 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/23, 9:40 PM

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

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

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