修复二级页面的工具_这些工具帮你快速搭建产品框架结构图

大家好，我是独立开发者Larry～当一个想法在你的脑海中越来越清晰的时候，想要把它实现为产品的意愿也会逐渐增强，这个时候你需要做的就是把产品的内容信息尽可能构架完善，用流程图、思维导图、组织结构图或者站点地图都是不错的选择，而且这类工具也很多，不过每个的侧重点不尽相同。

今天就给大家推荐几个不错的工具供你选择，我个人比较喜欢Whimsical系列，感兴趣的朋友可以试试。

http://Draw.io

网站地址：https://www.draw.io/

http://Draw.io是一个专业的开源图表工具，可以创建和共享流程图、组织结构图、UML图、ER模型、网络图等等，无需注册即可免费在线、PC桌面及平板电脑使用。

http://Draw.io的界面非常简洁直观，使用也很方便，不需要安装任何插件，打开即可使用。在页面左侧你可以看到http://Draw.io内置了大量形状素材库，对于初学者http://Draw.io还提供了详细的使用手册及快速入门视频教程。

使用http://Draw.io可以导入和导出JPEG、PNG、SVG、PDF、VSDX、HTML、XML、URL地址等多种格式。存储文件时除保存在电脑本地磁盘外，还可以选择Google Drive、OneDrive、Dropbox、GitHub、GitLab、Trello、浏览器、电脑或手机设备等本地或云端存储。

在线使用http://Draw.io支持IE、Chrome、Firefox、Safari及Opera等主流浏览器，桌面使用支持Windows、macOS、Linux deb、Linux Applmage、Linux rpm及Chrome OS等操作系统，所有版本都是免费和开源的，并且http://Draw.io承诺不会存储你的数据，更加安全可靠！

http://Draw.io目前在GitHub的Star数是9947，相关源代码及文件大家自行查阅，GitHub地址：https://github.com/jgraph/drawio

Octopus.do

网站地址：https://octopus.do/

Octopus.do是一个可以让你对网站或应用程序结构创建详细可视化站点地图并进行原型设计的在线工具，同时提供动态计算项目成本的功能，并以简单的链接形式进行分享。

打开网站，页面上的「Page」都可以代表你项目的网站页面，这些页面和内容块就构成了项目的网站地图。通过将鼠标悬停在「Page」页框上，「Page」页框右侧和底部会出现+控件弹出窗口，单击右侧的+按钮可以添加新的同一级别的页面，单击底部+按钮添加子页面；将鼠标悬停在「Page」页框上并单击它，「Page」页框底部出现-按钮用于删除页面，同时「Page」标题被激活可以对其进行编辑，点击标题右侧的+按钮，为页面添加模块；将鼠标悬停在「Page」页框顶部工具栏上，鼠标指针变为拖动模式，可以将页面排序并移动到不同的层级等，简单的操作可以让你快速无限制地创建、编辑、移动页面。

点击页面顶部的$按钮，页面右侧显示Estimate面板，允许为页面的设计、前端/后台开发、测试、项目管理等预估每个页面所需要的工时数，所有工时总结在估算表中，在估算表里可以修改工时费率、添加项目额外阶段工时和费率，最终合计项目总成本及税金等，工时费率支持美元、欧元、人民币、日元、英镑……全球各种货币。

除了上面的基础功能外，Octopus.do还提供了添加说明、添加图片、导出PDF、PNG及CSV文件、复制项目、密码保护项目等更多付费功能。

添加说明允许你为项目页面及页面内容添加备注描述，方便所有拥有项目链接的人共同查看。

在站点地图中将默认的「Page」页面直接替换成你的设计稿，再根据页面流程来布局站点结构，可以更加详细直观展示你的项目。

Zen Flowchart

网站地址：https://www.zenflowchart.com/

Zen Flowchart 是一个非常简洁好用的在线工具，用于创建流程图、组织结构图、站点地图等。和市面上的大多数流程图工具不同的是，Zen Flowchart删除了很多复杂且不必要的功能，成为了一个非常简单但功能齐全的流程图工具，使创建流程图更易于访问。

Zen Flowchart支持免费注册使用，免费用户限制免费创建2个文档，每个文档最多15个节点，付费升级每月$4.5即可享受无限文档、无限节点、无限存储空间、优先邮件支持及所有未来的更新等功能。

进入制作页面，顶部提供插入形状、添加节点、添加文本、删除、撤销、重做、缩放视图、节点颜色、字体大小样式、箭头样式等参数，所有创建调整只需要点击即可完成，没有任何学习成本。

当然，如果你想让你的文档更加个性化，可以试着在文档中拖动节点、调整节点间箭头路径、在节点箭头路径里添加文本、调整节点形状大小、文本框形状大小等等，操作文档过程中，Zen Flowchart会自动显示辅助线，方便参考元素间对齐关系来调整位置。

制作调整文档的过程中，Zen Flowchart也会自动保存所有操作，同时也支持你将文档导出为PNG图片，以及将文档发布到可以共享的唯一页面，共享给其他用户，并且该页面将自动更新你对文档的任何更改。

Whimsical

网站地址：https://whimsical.com/

Whimsical是一个专注于用户体验和速度的团队协作可视化工作区，提供流程图、线框图、便签和思维导图在线制作工具合集。

Whimsical Flowcharts流程图制作工具，除了添加节点、形状、连接器、文字等基本内容外，还支持上传图片、添加图标、添加链接、添加评论、搜索画板等，此外页面底部撤销/重做旁边有一个「Time Machine」Bate功能，点击该功能之后，出现播放器控件，可以播放你从创建项目开始到目前状态的所有过程，拖动时间线你可以将画板选择恢复到对应时间状态，功能非常强大。

Whimsical Wireframes线框图制作工具，可以为Web、iPhone、Android、iPad及其他画面创建线框流程图。

内置了丰富的预构建元件库，如按钮、输入、复/单选框等。

Whimsical Wireframes提供了成千上万的风格一致、分类和可搜索的图标，你可以在按钮、表单字段或者单独使用它们。

Whimsical Wireframes线框工具与Whimsical Flowcharts流程图工具的页面布局基本一致，页面左侧工具栏提供元件库添加元素、设备、连接器、文字、上传图片、添加图标、添加链接等功能，页面右上提供搜索画板内容、添加评论、分享/发布/打印文件等功能，页面底部右侧提供撤销/重做、「Time Machine」Bate功能及画板缩放等功能。

Whimsical Sticky Notes便签制作工具，是一种可视化项目管理工具，可用于将富文本、图像、注释等信息附加到卡片上，使用卡片来捕获和讨论我们想要处理的事情，比如添加功能、修复错误或者撰写文章等。

创建的所有卡片可以直接拖拽到堆栈中进行分类集合，拖拽堆栈边缘调整堆栈大小，堆栈内的卡片会同步调整大小或重新排列卡片以适应堆栈。

Whimsical Sticky Notes的画板是一个无限大的容器，允许用户创建多个卡片和堆栈。

卡片、堆栈之间可以添加连接器，比如标签和箭头，以指导用户完成工作流程。

Whimsical Mind Maps思维导图工具，用来集思广益、记笔记、创建站点地图和组织信息，比文本文档更有趣。

Whimsical Mind Maps的操作非常流畅、高效，与一般思维导图工具不同的是Mind Map提供了不同色彩的节点导线、支持二级以下的节点折叠、添加图标、添加链接等多种功能。

节点连接支持实线及虚线显示，线条支持曲线及折线显示，次级节点连线默认和一级节点连线颜色一致同时支持8种不同的颜色供用户主动选择。

拖拽节点可以将其与主项目脱离或粘合，支持在项目中添加评论，分享其他用户回复评论等实时多人编辑功能。

Whimsical的四个工具在使用时可以随时进行切换，不过免费用户最多可以创建4个免费画板，想要创建更多画板，需要付费升级。

最后

关于流程图、思维导图、组织结构图、可视化站点地图的工具还有很多，不管是哪一个只要能满足你的使用需求就是好的～今天的内容就是这些，希望对你有所帮助～

今天的内容就是这些，希望对你有所帮助，如果你对独立开发者感兴趣，或者你对产品、设计、技术、运营有一些自己的想法，公众号后台回复『加群』识别二维码添加“码力全开机器人”，回复『加群』即可加入码力全开Friends用户群，你也可以添加我的微信lishichao706，带你进入独立开发者的聚集地。

• 知识小铺
• 工作室
• 微博
• 知乎
• twitter