![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M 16 0 C 7.028 0 0 4.07 0 9.265 L 0 25.735 C 0 30.93 7.028 35 16 35 C 24.972 35 32 30.93 32 25.735 L 32 9.265 C 32 4.07 24.972 0 16 0 M 16 2.059 C 23.566 2.059 29.957 5.358 29.957 9.265 C 29.957 13.171 23.566 16.471 16 16.471 C 8.434 16.471 2.043 13.171 2.043 9.265 C 2.043 5.358 8.434 2.059 16 2.059 M 29.957 25.735 C 29.957 29.642 23.566 32.941 16 32.941 C 8.434 32.941 2.043 29.642 2.043 25.735 L 2.043 22.096 C 4.766 24.905 9.935 26.765 16 26.765 C 22.065 26.765 27.234 24.905 29.957 22.096 Z M 29.957 17.5 C 29.957 21.407 23.566 24.706 16 24.706 C 8.434 24.706 2.043 21.407 2.043 17.5 L 2.043 13.861 C 4.766 16.67 9.935 18.529 16 18.529 C 22.065 18.529 27.234 16.67 29.957 13.861 Z" fill="rgb(0, 0, 0)" height="35px" id="Xg0kd_6bM" transform="translate(4 3)" width="32px"/></svg>)
One Data, Two Views
Define the features, and they become a flow. Draw the flow, and it becomes a screen. Your planning can continue without having to start over.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M 26.053 0 L 4.947 0 C 2.215 0 0 2.215 0 4.947 L 0 26.053 C 0 28.785 2.215 31 4.947 31 L 26.053 31 C 28.785 31 31 28.785 31 26.053 L 31 4.947 C 31 2.215 28.785 0 26.053 0 M 29.021 26.053 C 29.021 27.692 27.692 29.021 26.053 29.021 L 4.947 29.021 C 3.308 29.021 1.979 27.692 1.979 26.053 L 1.979 4.947 C 1.979 3.308 3.308 1.979 4.947 1.979 L 26.053 1.979 C 27.692 1.979 29.021 3.308 29.021 4.947 Z M 13.851 12.202 C 13.851 13.113 13.113 13.851 12.202 13.851 C 11.291 13.851 10.553 13.113 10.553 12.202 C 10.553 11.291 11.291 10.553 12.202 10.553 C 13.113 10.553 13.851 11.291 13.851 12.202 M 20.447 18.798 C 20.447 19.709 19.709 20.447 18.798 20.447 C 17.887 20.447 17.149 19.709 17.149 18.798 C 17.149 17.887 17.887 17.149 18.798 17.149 C 19.709 17.149 20.447 17.887 20.447 18.798" fill="rgb(0, 0, 0)" height="31px" id="IJqHjBaZ1" transform="translate(4 4)" width="31px"/></svg>)
Document in Multiple Views
Structure, policies, and user flows each have their own view, so you can switch freely and keep your plan in sync.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M 0.343 2.836 C 0.126 3.021 0.001 3.291 0 3.575 L 0 31.02 C 0 31.561 0.443 32 0.989 32 C 1.536 32 1.979 31.561 1.979 31.02 L 1.979 23.637 C 6.609 19.916 10.533 21.841 15.061 24.057 C 17.719 25.363 20.584 26.764 23.636 26.764 C 25.873 26.764 28.213 26.013 30.654 23.92 C 30.871 23.735 30.998 23.467 31 23.183 L 31 3.575 C 31 3.191 30.774 2.843 30.422 2.683 C 30.07 2.524 29.655 2.583 29.363 2.834 C 24.581 6.935 20.577 4.971 15.939 2.697 C 11.34 0.442 6.101 -2.097 0.343 2.836 M 29.021 22.721 C 24.391 26.444 20.467 24.517 15.939 22.3 C 11.773 20.258 7.105 17.97 1.979 21.224 L 1.979 4.036 C 6.609 0.313 10.533 2.24 15.061 4.454 C 19.227 6.496 23.895 8.783 29.021 5.536 Z" fill="rgb(0, 0, 0)" height="31.999713998638754px" id="V51l8KUPg" transform="translate(5 4.002)" width="31.00000053662508px"/></svg>)
Planning in Context
Manage the entire structure and details on a single screen. Design intuitively without ever missing a page.
Start with Structure,
Not a Blank Page
From Documentation
to Visualization
Switch between Tree View for structure and Directory View for editing. You can manage everything in one place without juggling multiple files.
User Flow - Wireframe Linking
Based on the screen flow designed in the user flow,
wireframes are automatically generated.
Review the flow directly by viewing the screens during the planning stage.
How to Use It
Real-Time Document Updates
Optimize User Journeys
Map the big picture instantly. Define the overall flow and align with your team on where and how to start, all in one place.
Development Handoff