Styling Flowcharts Using CSS | Hacker News Reader

Styling Flowcharts Using CSS

flowchart.fun

163 pointstonerow23 comments

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.

Same. It’s great for this sort of stuff

Huge fan of Figjam here. It has the right balance of easy to use, looks good out of the box (which is an issue with most other tools like excalidraw), and tons of extra options and plugins.

For example, we were able to hook up the JIRA plugin and actually build a dependency tree of features where each node is a JIRA ticket that updates its status live from JIRA.

Blew my mind when we first realized we could do that.

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!

Thank you so much! I'm reworking app flows this week and I was hesitating about removing this demo. I'm taking this comment as a sign that it's got to stay.

One bit of feedback - on mobile there’s doesn’t seem to be an easy way to go to your homepage from the linked post. Clicking on the “FF” logo brings up a menu but none of those take you to the root page. And of course manually editing the URL is awkward on mobile.

Thank you! Much needed feedback. Going to fix that today.

I suggest don't remove the demo. I have a watermarking app https://watermark.ink the only reason there are non-english speaking users is because of the landing page itself is the app.

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...

I want to make architecture diagrams more natural in the future. This is far from perfect but here's my quick attempt at producing something like this in Flowchart Fun - https://flowchart.fun/n#EoUwhgxgLgBA3gKBjYB7ArlEAnJMDCqAtgA6...

Wow! That doesn't look bad at all!

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

Mermaid is awesome, love it

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

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.

I believe it would be tractable to allow for an additional export option (i.e. Cytoscape.js JSON, CSS) in Flowchart.fun so you could load your figure into a Cytoscape.js instance in your site. This approach would allow for interactive features in your site (e.g. click a node to go to the corresponding section in your article).

If you're looking for something more along the lines of an embedded tweet, it may be possible to use the fullscreen export link in an iframe.

Perhaps Rob could chime in with more details. I'm not involved with Flowchart.fun, but I am a fan. Congratulations on shipping your latest release, Rob.

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 : )

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.

Another smash success from my friends @ tone row

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

Second and third examples produce errors:

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

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

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

Reply on news.ycombinator.com