Wireflow – an open-source flowchart real-time collaboration tool | Hacker News Reader

Wireflow – an open-source flowchart real-time collaboration tool

github.com

276 pointsdragonsh49 comments

A "flowchart" has very specific meaning in programming contexts [1]. This tool is for wireframing [2]. It's also really just for the flow between pages, as the pages themselves are all pre-baked. There don't seem to be any tools to connect elements of the pages to one another, although some of the example diagrams have that feature and completely different toolbars.

[1] https://en.wikipedia.org/wiki/Flowchart [2] https://www.experienceux.co.uk/faqs/what-is-wireframing/

> A "flowchart" has very specific meaning in programming contexts [1]. This tool is for wireframing [2].

Wireframe also has very specific meaning for UI/UX people and this is not it. This is some combination of site map and user flow diagrams tool, and it's actually very close to diagrams that IME people who do this type of work have to draw a lot of. So it might not do what you'e expected by the title, but that probably just means you're not their target audience.

Agreed. I was trying to imply that you could almost do something like a very simplified wireframe, if the prebaked images happened to be close enough to the layout of your intended pages on your site. But part of the point of a wireframe is to show the hierarchy and layout of elements on the page, and how they connect. You have no control over any of that other than choosing the closest diagram, and connecting whole pages. I’m sure there is still some value to the tool, but the description is not accurate.

On the official site they call it a wire flow or user flow tool, which feels correctly more vague and less misleading.

Looks cool. However, for me in Firefox the dragging of elements from the left bar to the canvas doesn't work. It works fine in Chrome.

Same here (Firefox 81.0 on OSX.) No errors in the javascript console.

What works for me was dragging from the corner of the <div>, not from the svg itself. (Firefox 81.0, Ubuntu 20.04)

Looks neat! Great work.

it doesnt work for me on firefox/osx unfortunately

Yep, another Chrome only application.

it works for me using right click and drag the object on the left to the canvas. I am using firefox on mac.

Dragging with right click works with firefox on linux

It seems to work by dragging the whitespace around the icons, not the inner portion.

Same, latest firefox on windows

Not working for me either. Firefox 80.0 on Linux Mint 20. Dragging outside svg's doesn't do the trick either.

Same dragging issue here.

Firefox Developer Edition 82.0b4 (64-bit) on Pop_OS.

Unfortunately, we did not have enough time to take care of the firefox related issues. :( However I think this is doable with the right polyfill.

This app looks great - it would be really helpful to use it in Firefox where a lot of devs, designers and techies are.

Fixed this in a PR: https://github.com/vanila-io/wireflow/pull/51

The project website autoplays a terrible sound on page load and gave me half a heart attack. You should remove it

Yes, that is such a strange this to do. I'm really confused why a website would play a loading sound!

It's obnoxiously loud.

This is not a good experience. Very bizarre choice.

I immediately closed the tab. What year is it? 1999?

Playing any sound is bad enough, but they seem to have specifically chosen one that is designed to give you a stroke or something. It's honestly kind of amazing to me.

it's only a half stroke tho.

This is great. I didn't see a way to save the diagram "source" which would enable the user journey: edit-edit and save partial progress today, then load and continue editing tomorrow.

Still even without save this is already very nice way to explain user flows in a website. Good job!

Some suggestions: • plz remove the sound that plays when you go to the homepage https://wireflow.co/ (I know it's just a short sound, but sets an unpleasant precedent) • perhaps there could be an "import your own page type" and they get added to the sidebar? (user uploads will be pngs, not nice svgs as the stock ones but still) • add save + load option (to keep it simple, use native format of the app, assuming json) • keep it simple and single purpose: it's super nice and simple right now, but if you add lots of features it won't be • show some example user journeys (to give visitors ideas how they can use for their own project)

You are awesome! Thank you for sharing those cool ideas and valuable suggestions.

Pre-existing alternatives: http://webgraphviz.com/ http://www.nomnoml.com/

looks very polished. Great work! Havent seen many opensource UX tools

Wishlist:

1) App Screen Dimension (iphone, ipad etc)

2) A way to resize the Dimensions (longer, leaner, shorter etc)

3) Popups, Modals

4) Micro interactions (menu on/off)

5) A way to annotate, add sticky-notes on the canvas.

6) Whiteboard type of pen tool to markup areas (ex: this block is for next sprint)

7) A play button to preview the site (clickthro)

Thanks again for sharing!

8. Didn't see a way to save our creations for later use. That would be good

It was there on version 1, this is version 2 and a lot of features are on roadmap.

Looks very useful. Your main website has this twice on it: "Vanila crew is in love with Meteor.js, which is latest technology based on JavaScript (Node.js). It gives you fast, realtime, scalable applications which work on all modern browsers and devices."

It's possible that you wanted to make the second instance "It makes your applications fast, real-time, scalable and able to work on all modern browsers and devices" ;)

When I go to the editor, Chromium shows me a little plus in a circle next to the bookmark icon. Hovering it with the mouse shows "Install Create React App Sample". What on earth is this?

It's the default title for an installable web app created with React's 'create-react-app' tool.

Looks really polished. Great job. I didn't see any pricing in the hosted version. Are you not gonna monetize the hosted version?

Your URL for "become a backer" doesn't work - maybe you want to fix that :)

ALT+D (to go to the address bar in chrome and other browsers) doesn't work once I drag element from the left panel to the canvas. Please make it work. otherwise, looks good.

How much work is actually done here? Looks like it uses gg-editor to do everything from a glance

This seems overly abstract to me, but we need better tools for these kinds of things!

Looks neat. Wish you can add floating text labels and option to add custom svgs and pngs

really nice Firefox has dragging issue. works fine if dragged on the whitespace.(firefox 81.0 windows 10)

Looks great! Very neat.

really really nice!

> Vanila crew is in love with Meteor.js, which is latest technology based on JavaScript (Node.js).

Surprised to see this. I thought the development of meteor.js has stopped.

I was under a similar impression. I recall it being a midly interesting idea, before a lot of people determined it had too many issues and it fizzled out and the company began to push some other project.

Meteor has been under active development for a long time. It's not nearly as hot as it was 5-6 years ago, but it's still definitely a thing. A lot of the team that built Meteor went on to work on Apollo, the GraphQL data library. One of my companies has a Meteor based app...

One of the reasons I actually am a bit sad they removed Meteor from this version of Wireflow is that Meteor assumes storage is server-side, instead of using localStorage, which I find a very irritating trait of "modern" web apps, where everything you did is forgotten when you switch devices or browsers, clear your cache, or what-have-you.

My impression of Meteor over involvement with a Meteor-based project for a long time is that Meteor was seen as cool when you sit and play with the demo code, but once you're out in production projects it starts to get pretty hairy. It seems to work pretty well for side projects, but probably isn't super ideal to build your business on.

FWIW, it's been pretty stable though for a number of years, and stability is severely underrated in web dev.

Actually vanila crew moved away from meteor.js but hadn't have enough time to update the landing page to current trend (next.js reactjs etc.). You know technology changes a lot.

Meteor.js has newest Node.js LTS etc dependencies, and is actively maintained.

Reply on news.ycombinator.com