7 ms·

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

276 points by dragonsh 6y ago

redindian75 6y ago
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!
- the_arun 6y ago
  8. Didn't see a way to save our creations for later use. That would be good
  - vanilataher 6y ago
    It was there on version 1, this is version 2 and a lot of features are on roadmap.
ivan_ah 6y ago
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/ 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)
- vanilataher 6y ago
  You are awesome! Thank you for sharing those cool ideas and valuable suggestions.
senectus1 6y ago
really really nice!
neogenix 6y ago
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.
- draven 6y ago
  Same here (Firefox 81.0 on OSX.) No errors in the javascript console.
- alskdj21 6y ago
  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.
  - franckl 6y ago
    it doesnt work for me on firefox/osx unfortunately
    - deleted 6y ago
      [deleted]
  - deleted 6y ago
    [deleted]
- pjmlp 6y ago
  Yep, another Chrome only application.
- zakki 6y ago
  it works for me using right click and drag the object on the left to the canvas. I am using firefox on mac.
  - nextaccountic 6y ago
    Dragging with right click works with firefox on linux
murukesh_s 6y ago
Looks neat. Wish you can add floating text labels and option to add custom svgs and pngs
bauerd 6y ago
The project website autoplays a terrible sound on page load and gave me half a heart attack. You should remove it
- superasn 6y ago
  Yes, that is such a strange this to do. I'm really confused why a website would play a loading sound!
- deanclatworthy 6y ago
  It's obnoxiously loud.
- captainill 6y ago
  This is not a good experience. Very bizarre choice.
- rockostrich 6y ago
  I immediately closed the tab. What year is it? 1999?
- notJim 6y ago
  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.
  - fb03 6y ago
    it's only a half stroke tho.
anjanb 6y ago
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.
virgilp 6y ago
Your URL for "become a backer" doesn't work - maybe you want to fix that :)
TooCreative 6y ago
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?
- onion2k 6y ago
  It's the default title for an installable web app created with React's 'create-react-app' tool.
gengear 6y ago
really nice Firefox has dragging issue. works fine if dragged on the whitespace.(firefox 81.0 windows 10)
moltar 6y ago
Looks great! Very neat.
contingencies 6y ago
Pre-existing alternatives: http://webgraphviz.com/ http://webgraphviz.com/ http://www.nomnoml.com/ http://www.nomnoml.com/
yonl 6y ago
Looks really polished. Great job. I didn't see any pricing in the hosted version. Are you not gonna monetize the hosted version?
victor106 6y ago
> 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.
- non-entity 6y ago
  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.
- indymike 6y ago
  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...
- ocdtrekkie 6y ago
  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.
- vanilataher 6y ago
  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.
- xet7 6y ago
  Meteor.js has newest Node.js LTS etc dependencies, and is actively maintained.
Igorvelky 6y ago
Does NOT work on FIREFOX. Are you * serious? XD
s1mon 6y ago
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 https://en.wikipedia.org/wiki/Flowchart [2] https://www.experienceux.co.uk/faqs/what-is-wireframing/ https://www.experienceux.co.uk/faqs/what-is-wireframing/
- ivanhoe 6y ago
  > 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.
  - s1mon 6y ago
    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.
- keerthiko 6y ago
  On the official site they call it a wire flow or user flow tool, which feels correctly more vague and less misleading.
nawgz 6y ago
How much work is actually done here? Looks like it uses gg-editor to do everything from a glance
ryan-allen 6y ago
This seems overly abstract to me, but we need better tools for these kinds of things!
itsdsmurrell 6y ago
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" ;)

276 points by dragonsh 6y ago

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!

the_arun 6y ago
8. Didn't see a way to save our creations for later use. That would be good
- vanilataher 6y ago
  It was there on version 1, this is version 2 and a lot of features are on roadmap.

ivan_ah 6y ago

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

vanilataher 6y ago
You are awesome! Thank you for sharing those cool ideas and valuable suggestions.

senectus1 6y ago

really really nice!

neogenix 6y ago

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.

draven 6y ago
Same here (Firefox 81.0 on OSX.) No errors in the javascript console.
alskdj21 6y ago
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.
- franckl 6y ago
  it doesnt work for me on firefox/osx unfortunately
  - deleted 6y ago
    [deleted]
- deleted 6y ago
  [deleted]
pjmlp 6y ago
Yep, another Chrome only application.
zakki 6y ago
it works for me using right click and drag the object on the left to the canvas. I am using firefox on mac.
- nextaccountic 6y ago
  Dragging with right click works with firefox on linux

murukesh_s 6y ago

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

bauerd 6y ago

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

superasn 6y ago
Yes, that is such a strange this to do. I'm really confused why a website would play a loading sound!
deanclatworthy 6y ago
It's obnoxiously loud.
captainill 6y ago
This is not a good experience. Very bizarre choice.
rockostrich 6y ago
I immediately closed the tab. What year is it? 1999?
notJim 6y ago
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.
- fb03 6y ago
  it's only a half stroke tho.

anjanb 6y ago

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.

virgilp 6y ago

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

TooCreative 6y ago

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?

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

gengear 6y ago

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

moltar 6y ago

Looks great! Very neat.

contingencies 6y ago

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

yonl 6y ago

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

victor106 6y ago

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

non-entity 6y ago
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.
indymike 6y ago
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...
ocdtrekkie 6y ago
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.
vanilataher 6y ago
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.
xet7 6y ago
Meteor.js has newest Node.js LTS etc dependencies, and is actively maintained.

Igorvelky 6y ago

Does NOT work on FIREFOX. Are you * serious? XD

s1mon 6y ago

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 https://en.wikipedia.org/wiki/Flowchart [2] https://www.experienceux.co.uk/faqs/what-is-wireframing/ https://www.experienceux.co.uk/faqs/what-is-wireframing/

ivanhoe 6y ago
> 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.
- s1mon 6y ago
  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.
keerthiko 6y ago
On the official site they call it a wire flow or user flow tool, which feels correctly more vague and less misleading.

nawgz 6y ago

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

ryan-allen 6y ago

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

itsdsmurrell 6y ago

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" ;)