Wireflow – free, online, open source tool for creating user-flow prototypes(wireflow.co)
wireflow.co
Wireflow – free, online, open source tool for creating user-flow prototypes
https://wireflow.co
46 comments
At first glance, this looks useful but is it being maintained? Their main branch on GitHub hasn't been updated in years: https://github.com/vanila-io/wireflow
1. Originally, Wireflow was made with Meteor, when there was a way to save data.
2. Then there was a rewrite with React, but not yet a way to save data.
3. Then maintainers did have some other projects where they did spend most of their time.
That brings my questions, are some interested in this kind of tool? Would some like to contribute more to Wireflow? Has some news about other similar tools bring more interest to have Wireflow maintained even better?
Just thinking, as one of the maintainers of Wireflow.
2. Then there was a rewrite with React, but not yet a way to save data.
3. Then maintainers did have some other projects where they did spend most of their time.
That brings my questions, are some interested in this kind of tool? Would some like to contribute more to Wireflow? Has some news about other similar tools bring more interest to have Wireflow maintained even better?
Just thinking, as one of the maintainers of Wireflow.
I’m a heavy user of excalidraw. I wonder if it would be possible to extend something like that to add “flow” design. It could be as simple as defining the dotted arrow as the view direction, ie. when an element is clicked, show this bounding box, where the dotted bounding box is used to zoom to that level.
You may already do this but if you haven’t, check out the excalidraw plugin in Obsidian: https://github.com/zsviczian/obsidian-excalidraw-plugin
Zslot has put an incredible amount of work into it and it extends excalidraw to have a lot of additional capabilities. You can also use it within Obsidian canvas for some of the flow stuff you mention but you could very likely just use the plugin.
Zslot is constantly updating it too so you get new features and updates almost every other time you open it. Amazing work done there.
And Obsidian is just awesome too :)
Zslot has put an incredible amount of work into it and it extends excalidraw to have a lot of additional capabilities. You can also use it within Obsidian canvas for some of the flow stuff you mention but you could very likely just use the plugin.
Zslot is constantly updating it too so you get new features and updates almost every other time you open it. Amazing work done there.
And Obsidian is just awesome too :)
You could ask for feedback on https://discourse.opensourcedesign.net/ where quite some UX designers in open source projects hang out.
I personally remember nokias flowella fondly, but I do not know if it does the same as wireflow.
I had contributed the Dockerfile to the project when it was last posted in HN.
Friendly maintainers but I think being built by an App development studio, I can imagine they have different priorities.
Friendly maintainers but I think being built by an App development studio, I can imagine they have different priorities.
If it got to the point where it replaced the feature set of Adobe XD, and it remained free and open source, I could see this being useful. It took me a while to get the hang of Figma, and sometimes you don't need that sophistication at the very early stage.
Almost feel like it'd make more sense to merge with another tool, like tldraw
Seems to limited to me fwict.
Likely very basic icons for each step. Might as well just use a normal flowchart
I clicked and started drawing. Can export as image. No logins, no signups. What a delight.
No signups is great.
But what do you mean by drawing? Are there supposed to be drawing tools?
It looks like bunch of templates for constructing site-maps?
Is this supposed to encompass mobile design patterns as well?
I understand it was done in less than a month but if you take a few days to learn something like Principle (https://principle.app/) then you could the rest of the work in two weeks and have an interactive full scale prototype in at the end.
But what do you mean by drawing? Are there supposed to be drawing tools?
It looks like bunch of templates for constructing site-maps?
Is this supposed to encompass mobile design patterns as well?
I understand it was done in less than a month but if you take a few days to learn something like Principle (https://principle.app/) then you could the rest of the work in two weeks and have an interactive full scale prototype in at the end.
Looks awesome! The YouTube video linked inside the GitHub README seems to be unavailable: https://youtu.be/zm0XbLmXtXY Would love to see an up-to-date demo video.
I'm a bit confused about the delivery of this. It's presented as an installable web app, but seems to be completely broken in chrome for android.
I'm not sure what I expected trying to check it out on my phone, but I'd at least expect to be able to run it on a tablet. The use case for running it on a phone might be to view, but not edit a project. One might need to review changes and reply to an email chain or teams chat between meetings from their phone if this was going to be used in the real world. Would suck to need to juggle nth-revision PDF exports about an app design. Everyone hates that.
I'm not sure what I expected trying to check it out on my phone, but I'd at least expect to be able to run it on a tablet. The use case for running it on a phone might be to view, but not edit a project. One might need to review changes and reply to an email chain or teams chat between meetings from their phone if this was going to be used in the real world. Would suck to need to juggle nth-revision PDF exports about an app design. Everyone hates that.
Wrote an article a while back about the idea of creating flow-charts like that based on your actual smartly-minified wireframes. https://medium.com/proof-of-concept/the-story-of-a-true-ux-t...
I eventually want to incorporate something like this in my tiny ux app (https://www.tinyux.app), but have not yet gotten around to it.
It would be so cool if you could start either from the flow, page or component perspective, but all are essentially using the same source of truth.
Had a presentation once to a room of UX designers who really liked the vision and concept. Then I showed them my prototype with vim-like text commands to manipulate wireframes and got a lot of blank stares. Still makes me laugh to think about that mismatch of expectations.
I eventually want to incorporate something like this in my tiny ux app (https://www.tinyux.app), but have not yet gotten around to it.
It would be so cool if you could start either from the flow, page or component perspective, but all are essentially using the same source of truth.
Had a presentation once to a room of UX designers who really liked the vision and concept. Then I showed them my prototype with vim-like text commands to manipulate wireframes and got a lot of blank stares. Still makes me laugh to think about that mismatch of expectations.
Anyone know of a similar project but written in VueJs?
This looks really useful! I wonder if it's easy to fork it to make game design icons.
What is the point of this project? I can just add screens (which are stock graphics, can change the text).
I can add relationships between screens (but not clickable).
So this looks like a sitemap.
Is that all?
So this looks like a sitemap.
Is that all?
I believe so! Nothing that a full drawing app can't do, but it is also nice to have simple tools like this for quick sketches.
What is a user-flow prototype?
All the steps it takes a User to accomplish an action. Usually low fidelity (wireframes vs finished designs). The prototype part I'd assume means you can click through it (like Figma prototypes).
E.g. Login Form. Could should initial state -> error state -> submitting state -> success state. Could be a "User Login flow".
E.g. Login Form. Could should initial state -> error state -> submitting state -> success state. Could be a "User Login flow".
> It have built in live chat which give you ability to communicate with your team mate and still be in the same app while you collaborating in real-time.
Not to be the grammar tsar, but if anyone from there is reading this it could do with a little fixing.
Not to be the grammar tsar, but if anyone from there is reading this it could do with a little fixing.
[deleted]
What tools are others using to build these wireflows? We find figma too detailed and mockup does not quite get us there (not sure why).
Any recommendations?
Any recommendations?
I like text-based editing but found plantuml lacking in this regard, so I created my own thing. It's basically a html/css template engine with a library of (hand-drawn-ish) components. You can use it as a VSCode extension ('WireText'), featuring a live preview.
https://gitlab.com/saxion.nl/42/wiretext-code#wiretext-vscod...
A (non-text-based) alternative I kind of like is Quant-UX: https://quant-ux.com/
https://gitlab.com/saxion.nl/42/wiretext-code#wiretext-vscod...
A (non-text-based) alternative I kind of like is Quant-UX: https://quant-ux.com/
Your solution is awesome. Thanks for sharing.
Love the indentation based DSL - this looks very intuitive.
I do a lot of quick sketches with excalidraw but I easily see wiretext-code replacing that with a better workflow where I can extract out components and prototype by composing those instead of copy pasting around.
Love the indentation based DSL - this looks very intuitive.
I do a lot of quick sketches with excalidraw but I easily see wiretext-code replacing that with a better workflow where I can extract out components and prototype by composing those instead of copy pasting around.
Draw.io (freeware, cross-platform desktop app). I have used it for diagrams mainly, but also for quite a bit of UX mockups.
Its strength is diagrams though. But it is quite generic also in a way.
I find balsamiq is quite easy to get to grips with. My biggest complaint (at least for the desktop app, haven't tried the cloud version) is the lack of an "infinite" canvas.
I've used Zeplin on a few projects and it was a good experience.
> mockup does not quite get us there (not sure why)
I can only speak as a dev, but it's incredibly frustrating when design agencies leave out too many details or don't consistently follow guidelines. No tool is going to fix that.
On my side of the fence we generally don't care about the tools used as long as we have a completed design to look at that isn't late and isn't going to be pulled out from under us. I've seen product managers lie about all reviews being completed to "get devs started early" only to see the next revision break a ton of work. They also lie about copy text being final not realizing the impact even one word can have on everything. I've seen designers commit sins ranging from using system or licensed fonts causing them to have to rework an entire layout to not even exporting assets properly or at all before handing off to devs. If you have people like that, the back and forth and pain is endless for everyone.
> mockup does not quite get us there (not sure why)
I can only speak as a dev, but it's incredibly frustrating when design agencies leave out too many details or don't consistently follow guidelines. No tool is going to fix that.
On my side of the fence we generally don't care about the tools used as long as we have a completed design to look at that isn't late and isn't going to be pulled out from under us. I've seen product managers lie about all reviews being completed to "get devs started early" only to see the next revision break a ton of work. They also lie about copy text being final not realizing the impact even one word can have on everything. I've seen designers commit sins ranging from using system or licensed fonts causing them to have to rework an entire layout to not even exporting assets properly or at all before handing off to devs. If you have people like that, the back and forth and pain is endless for everyone.
I use Excalidraw for this kind of stuff. It has the best interface of all the tools in its class and it's easy to create diagrams/flows/mockups that peope recognise are 'in progress', but still look great.
I use excalidraw for almost everything. Brilliant tool. I already mentioned it in another response in this thread but using excalidraw inside obsidian via https://github.com/zsviczian/obsidian-excalidraw-plugin has been a game changer for me.
I use balsamiq for both flows and UX "paper" prototypes. My only gripe is not being able to easily re-use groups of controls
Whimsical is amazing.
https://whimsical.com/
https://whimsical.com/
excalidraw is my go to for that in-between
[deleted]
What has happened? Has some other news raised more interest in this project?
I'm having trouble loading the webpage