Request details

Ability to connect shapes to draw a flowchart

I would like to be able to connect different shapes (rectangles, rhombuses/diamonds, ellipses, but potentially everything). The connector line should either be solid, dashed or dotted and end in an arrow. If I move a shape, both of the connected shapes stay connected (the line expands/contracts as necessary). The line should be able to carry a text label, either in the middle, at the beginning or the end (supercool would be if you could add an offset from/to beginning/end of the line).

In other words: I would like to be able to draw a flowchart.

For me as a UX designer (not doing visual design at all!), this is a very important feature to think about interactions on a high-level (which screens/states are there, how are they connected, how does a user move through these screens). Right now, I still have to use Axure for that job, or a dedicated diagramming software like OmniGraffle or (in the old ages) Visio.

This feature could be supported in Design Mode. It's not meant to span several artboards. In fact, for such a feature I would only need one (large artboard), or even better an infinite canvas. As an alternative, it could get a dedicated mode, like a "Flowchart Mode".

Also, in large projects I had to draw more than one flow chart. As an example, last year I had to draw a really large one (needed to be plotted on A1 paper to discuss with clients), but in addition to that, I drew ten sub-flowcharts (the large one was the high-level, the smaller sub-diagrams showed what happened when a user entered a specific screen). All those flow charts were printed into one PDF file with eleven pages. With Axure no big deal – with XD impossible. :-(

Thus, it would be cool to be able to draw one flow chart. Then, add more features like the support of more than one flowchart and the abbility to export only a selected one or all of them into one PDF file. Add more features over time to further improve that, like the different positions of the text label on connecting lines.

203 votes
Sign in
(thinking…)
Sign in with: Facebook Google
Signed in as (Sign out)

We’ll send you updates on this idea

Stefan Freimark shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

26 comments

Sign in
(thinking…)
Sign in with: Facebook Google
Signed in as (Sign out)
Submitting...
  • Radu Ghitulescu commented  ·   ·  Flag as inappropriate

    +1
    that would be really really helpful> I now use two software to build the UX experience.
    One is adobe Xd for wireframing and proto and another one (and I hate that) for flows

  • Anonymous commented  ·   ·  Flag as inappropriate

    I'm actually surprised that Adobe doesn't already have a flowchart function in any of their products. This seems like the natural place for it to show up.

  • Xavier Geerinck commented  ·   ·  Flag as inappropriate

    I'd love to see this as well! Really the only thing on the moment making me frustrated with the product :)
    Any update about it already?

  • James commented  ·   ·  Flag as inappropriate

    The subject title say it all and on top of that allow me to move the box while the arrow follow along. To make the request more challenging, allow me to "bend" the arrow line and "hop" over another arrow line at the intersection ("crossing") in a more complex diagram/ org chart/storyboard/etc

  • Ruck commented  ·   ·  Flag as inappropriate

    I'm a simple man doing simple wireframes...no interaction - just something to show a client or funding individual that when you press button X it leads to Y screen. And yet, when I draw a line connecting the two - I find: 1) I cannot draw more than one line on the same plane, and if I try, a part of the line disappears. 2) When I finally "trick" XD into doing what I need it to do, those lines seem to disappear over time. I can get a line that goes from Ipad to Ipad, but if I have to go to a different section of the layout in a branch, or tree layout, forget it.

    I found a tutorial about laying one square on top of another and then extending them as a Boolean shape...but c'mon...surely the folks at the great Adobe in the sky can figure out a menu or manner in which a lowly designer like myself can make an arrow that goes from one device to another...

    I really like working in XD and find it to be quite intuitive if not a bit clunky without scroll bars and some of the more intuitive stuff that open source programs like Pencil do naturally.

    So arrows that can bend and segment and scroll bars...pretty please?

  • Deepak Madhana Raj K commented  ·   ·  Flag as inappropriate

    Can Adobe xd have wireflow option. User can create wireframes with task flow diagram so that he can place decision boxes outside art board. The ux Designer needs to create happy path and non happy path.

  • Anonymous commented  ·   ·  Flag as inappropriate

    Been loving XD since its beta but always feel painful to draw pretty arrows in the user flow, etc. Would appreciate this can be added in next release.

  • CHRISTOPHER A ROSE commented  ·   ·  Flag as inappropriate

    I 100% agree, I currently have to use Lucidchart to make diagrams of states and user flow. I would really love to be able to do this all in one place. From a prototyping standpoint I would like to be able to click on any of my states and be taken directly to the corresponding artboard.

  • Arnold commented  ·   ·  Flag as inappropriate

    I have been working on projects that need a quick flow-chart mock up. XD needs these features. Simple boxes, with lines that snap. Almost like the prototype tab, but for flowchart/diagram making.

← Previous 1

Feedback and Knowledge Base