WebStorm教程--生成文件关系图

WebStorm Diagrams 功能介绍

最新推荐文章于 2025-07-22 10:19:27 发布

原创最新推荐文章于 2025-07-22 10:19:27 发布 · 5k 阅读

4 ·

CC 4.0 BY-SA版权

编辑器技巧专栏收录该内容

5 篇文章

订阅专栏

本文介绍了 WebStorm 2017.3.3 版本中的 Diagrams 功能，该功能能够自动生成项目文件夹结构的关系图，有助于理解和整理代码结构。通过简单的操作步骤，用户可以方便地查看并调整代码模块间的依赖关系。

本人现在用的webstorm版本是2017.3.3;最近发现一个很强大的功能:Diagrams.利用这个功能,可以快速的生成指定文件夹下面的结构关系图;帮助我们阅读代码;

具体操作如下:在Project面板中邮件点击任一文件夹或文件,在倒数第二个选项中依次点击Diagrams →show Diagram,如下图,然后就是等待状态;等待加载完成就可以看了

点击上面的每个框选中,等鼠标指针编程十字的时候,就可以拖动改变模块的位置了;

工具栏菜单如下:

从左到右依次为:切换视图,放大,缩小,恢复默认比例;适合当前窗口,使用当前布局,保存,导出(导出支持常见的图片格式);打印等

tips : 如果项目视图比较负责,图片显示比较密集,可以按住Alt键可以使用放大镜功能.

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

WestLonely

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

使用反汇编工具IDA查看动态库的汇编代码上下文，结合安卓系统生成的Tombstone文件，快速定位安卓app程序底层C++库的崩溃问题

dvlinker的技术专栏

08-14

3万+

使用IDA反汇编工具查看汇编代码上下文，结合安卓系统自动生成的Tombstone文件，去分析安卓app程序底层C++模块的崩溃问题。

用echarts制作红楼梦关系图——保姆级教程（照做可出结果）

zgmssy的博客

03-20

1430

/ 为复选框添加事件监听});});// 搜索功能});});});// 找到搜索节点对应的所有关联节点});// 去重// 将搜索到的节点以及其关联节点添加到结果中if (!});});});});} else {alert('未找到匹配节点。');// 更新图表数据});// 更新图表数据});t=N7T8。

2 条评论您还未登录，请先登录后发表或查看评论

gephi生成网络关系图_Gephi快速入门–《追风筝的人》人物关系图谱

weixin_39594103的博客

11-30

1817

Gephi是一款基于JVM的开源网络分析软件, 其主要用于各种复杂网络系统，动态和分层图的交互可视化与探测，即：探索性数据分析，链接分析，社交网络分析，生物网络分析等。1.打开图形文件常见图形文件格式有：gehi输入格式以CSV格式为例，选择【文件->新建项目】，然后选择【数据资料】工具栏按钮，在出现的数据表格面板中，选中【边】，选择【输入电子表格】，在弹出的对话框中，选择准备好的文件：追风...

WebStorm生成Vue的组件关系图

u012632105的博客

12-30

588

快捷键：Ctrl+Alt+U

WebStorm IDE：高效开发的必备设置

最新发布

weixin_31869917的博客

07-22

817

WebStorm是JetBrains公司开发的一款强大的JavaScript集成开发环境（IDE），专为Web开发而设计，支持HTML, CSS, JavaScript等技术栈。它的智能代码编辑功能、代码质量分析以及广泛的语言支持使其成为前端开发者的首选工具。本章节将介绍WebStorm的基础功能和优势。除了语法高亮外，WebStorm 还允许用户创建自定义的高亮显示规则，这在处理复杂的逻辑或是查找代码中的特定模式时非常有用。

WebStorm项目目录结构

weixin_52976120的博客

01-04

924

项目核心文件夹：包括项目代码，各种静态资源等，是我们开发的重点工作目录。babel的配置文件，babel主要作用是将ES6+的语法改为ES5。存放公共资源和项目的主入口文件 index.html。小组件，一般做子组件，对应view中页面级别大组件。项目配置，用于管理项目的低赖性，脚本，版本等。项目资源，imange图片，视频，音频等。项国介绍文件，对项目的主要信息进行描述。是根组件，所有内容都在它里面.项目依赖都会下载到这个地方。git配置上传时忽略文件。

如何生成模块中的头文件引用关系图

weixin_54516968的博客

10-24

2256

当拿到一个模块的代码，我们自然而然的想要生成了解代码中的模块调用关系。那么下面的脚本就是生成了模块之间的调用关系，图示如下：# 原理使用dot画图因此，写一个脚本生成如上的dot文件，然后调用dot命令则可生成模块中的关系图。

使用TS时，在Redux中类型声明的各文件关系图

m0_58447769的博客

11-28

385

以下均为固定套路

webstorm模板快速生成

阿嚏乱码的地方

01-07

2265

前言我们在使用webstorm开发项目的时候，有时会重复写多个很相似的代码块，经常要从别的代码处复制粘贴后修修改改。那么能不能将这些重复经常写的代码块抽象出来输入一行命令就能展示呢？可以，webstorm内置了这个功能，我们来说下如何使用。步骤 1、在webstorm设置中搜索live templates 2、找到需要设置的模板类型，我这里选择的是JavaScript（typeScript也包含在js模板设置中）， 3、添加模板，输入你要取的快捷名，模板介绍等等。...

webstorm使用教程vueweb

05-23

### WebStorm 在 Vue 开发中的使用教程 #### 一、安装与配置为了使 WebStorm 支持 Vue 的开发，需要完成以下两个关键步骤： 1. **安装 Vue 插件** 需要在 WebStorm 中手动安装 Vue.js 插件。这一步是为了让 IDE...

Cesium中文教程-Cesium and Webpack

newston的博客

06-18

3131

目录前提条件(Prerequisites) 创建一个基本webpack应用(Create a basic webpack app) 使用npm初始化应用程序(Initialize an app with npm) 创建应用程序代码(Create our application code) 安装和配置webpack(Install and configure webpack) 打包应用程序(Bundle the app) 运行开发服务器(Run the development server)

深入理解Vue-cli搭建项目后的目录结构探秘

12-01

我最近也在研究Vue-cli的路上，今天了解一下Vue-cli目录结构，那么今天也算个学习笔记吧！一、前言这里先说一下使用vue-cli之前的事情。由于刚刚接触Vue不久，就接到了一个移动端项目，于是打算使用vue来进行一次尝试，所以按照练习时候的样子，emmm先把vue.js引入网页里来，emmm自己的外联main.css样式引进来，还有自己的main.js文件，还有一些图片布拉布拉的，所以我整个项目的结构如下：（捂脸） ├── css ├── images ├── index.html └── js 由于之前我连路由，组件什么的都不会用，所以项目效果可想而知，连点击文章标题显示

vue+webpack+vue-router+element+axios全家桶搭建vue项目完整教程详解 2019

PGguoqi的博客

04-19

9501

未完

vue-cli入门（二）——项目结构

weixin_34413802的博客

04-21

854

前言在上一篇项目搭建文章中，我们已经下载安装了node环境以及vue-cli，并且已经成功构建了一个vue-cli项目，那么接下来，我们来梳理一下vue-cli项目的结构。总体框架一个vue-cli的项目结构如下，其中src文件夹是需要掌握的，所以本文也重点讲解其中的文件，至于其他相关文件，了解一下即可。文件结构细分 1.bui...

06 Vue项目结构：在WebStorm中查看和了解项目

巅峰键盘侠

08-26

1304

使用WebStorm或者命令行创建好Vue项目后，它就是一个典型的工程化项目了，这里以WebStorm为例展示一个我目前正在开发的商业项目，项目结构如下图所示：上图中，箭头指向的左侧红色框内就是Vue工程化项目的完整结构，这里讲解几个最核心的目录和文件：（1）/index.html 文件项目入口文件，一般不需要修改（2）/src 目录项目源码存放目录（3）/config...

js ide WebStorm 使用总结

sdfhncfw的博客

11-08

664

js ide WebStorm 使用总结

Webstorm 创建文件使用模板自动生成代码

老孟Flutter

03-31

9805

打开File->Setting，弹出如下：选中JavaScript File:/** * Created by mqd on ${DATE}. */import React, {Component} from 'react'; import { StyleSheet, View, } from 'react-native';export default class ${NAME}

2021年最新webstorm导出设置文件

shiyusuifeng的博客

07-28

3953

项目场景：今天重装电脑，自己之前辛苦调整的webstorm配置想导出保存先来。找了一下，没到导出的地方，遂上网求助，但回答都是2020年之前的，现在根本找不到 Export Settings选项问题描述：最新版本的webstorm 没有 Export Settings 选项网上千篇一律地说 File->Export Settings，看着没用的答案火大，但生活还得继续，求别人不行，只能自己再找找方法解决方案： File->Manage IDE Settings->Expor

webstorm导出html,WebStorm 自定义字体、语法高亮及导入导出用户设置

weixin_32394247的博客

07-01

1424

自定义语法高亮快捷键Ctrl+Alt+S打开Settings(设置)界面，Editor(编辑器) -> Colors&Fonts(颜色和字体)。不同语言有各自的语法高亮规则，但有一部分是通用的(General)，我们首先来设置General，然后再根据需要设置不同语言的语法高亮。General的设置普通文本：default text折叠文本: Folded text光标: Caret...