过去十天，在Inherd开源团队的努力下，我们实现了Coco的第一个完整功能——实现一个项目基础架构的可视化。（PS：Coco是一个研发绩效分析工具，比如团队发展现状（根据结构复杂度和行数），团队演化，历史分析等）所以，为了验证开发过程的完整性，我们发布了0.1。1版本（目前只构建了macOS平台，其他平台暂未构建）。在这个版本中，我们实现了两个主要的命令行工具：coco。通过CLOC、Git等可视化（有待改进）做你对项目所做的事情。可视化cocoCLI生成的结果。其中一项重要功能是：交互架构可视化。架构图真的靠谱吗？在软件开发中，我们经常习惯性地使用各种可视化工具，比如UML，用来让开发人员快速了解系统某一部分的架构，快速熟悉不同元素之间的关系。同样，将架构可视化可以帮助我们快速了解系统的现状，快速发现系统中存在的问题。在实践中，我们会有不同的可视化模式：手绘架构图。UML图。根据用例图将用户抽象成类，描述类的内部结构和类之间的关系，是一种静态结构图。C4型号。在C4模型中，一个重要的思想是架构的抽象层次类似于地图，可以缩放。一个对应的体现是：系统System、容器Container、组件Component和代码Code。通过系统不同层次的联系，我们可以有机地看到整个系统的组成。并且不同的开发者也可以看到适用于他们的架构模式。回到现实世界，我们常常会对架构图的真实性产生一些怀疑。为此，我们经常会回到代码中去看看真实世界的架构是什么样子的，或者引入像ArchGuard这样的工具来进行架构保护。因此，在Coco中，我们实现的第一个功能就是轻量级架构可视化。轻量级架构可视化主流编程语言的层次架构与目录结构绑定，即其组织形式被约束在文件系统的形式。所以，目前Coco的架构可视化，主要针对的是分层架构，即文件+（PS：目录结构。如果能在Coco中实现C4模型，那自然是好的。)在这种模式下，我们只需要实现对所有代码文件行数的统计即可。获取这些数据并进行可视化后，我们就可以得到一个轻量级的可视化架构。为此，在Coco中，我们使用了：CLOC（CountLinesofCode），一种可以统计多种编程语言中的空行、注释行和物理行的工具。D3.js是一个使用动态图形进行数据可视化的JavaScript库。通过两者的结合，我们可以将现有软件的分层架构可视化，实现其交互设计——比如代码仓库的延续等等。使用Coco进行架构可视化（PS：由于能量原因，虽然目前构建了不同的操作系统版本，但只测试了macOS版本。）Coco主页：https://github.com/inherd/coco过程如下：安装可可。您可以从Release页面下载相应的二进制包，或者从源代码构建它。配置。根据Coco的README.md编写Coco配置文件coco.yml，并配置相应的代码仓库信息。它可以是远程项目、本地项目或.分析。执行可可。可视化。执行可视化服务器可以运行Web服务，可以通过浏览器访问当前的架构分析结果。下面是Redis的结果图示例（第125842行）：代码结构很清晰，有木有。打开deps可以发现依赖主要在三个模块：jemalloc、lua和hiredis：以下是早前GitHub上泄露的B站后台源码（3007351行，含依赖）：对应的代码热图：更多示例参见：https://inherd.github.io/cases/欢迎其他人尝试或参与开发。GitHub：https://github.com/inherd/coco本文转载自微信公众号「phodal」，可通过以下二维码关注。转载本文请联系phodal公众号。
