Styling Flowcharts Using CSS

by tonerowon 7/18/2023, 1:15 PMwith 23 comments

by pier25on 7/18/2023, 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 superasnon 7/18/2023, 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 tomhalletton 7/18/2023, 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 jimmychoozyxon 7/18/2023, 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 Jowseyon 7/18/2023, 6:45 PM

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

by intendedon 7/18/2023, 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 ikesauon 7/18/2023, 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 galaxyLogicon 7/19/2023, 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 joelsrubinon 7/19/2023, 12:33 AM

Another smash success from my friends @ tone row

by rodrigobelluscion 7/18/2023, 2:30 PM

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

by rayshanon 7/19/2023, 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 jeanphillejon 7/18/2023, 9:40 PM

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

by Zekioon 7/18/2023, 6:26 PM

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