用VScode绘制函数调用流程图

Posted 2022-05-30 sanqima

    在C++编程中有时候需要画出多个class类之间的调用关系，可以使用Visio画UML类图来实现，也可以使用VScode的函数头+箭头来实现。这里介绍使用VScode里的函数头+箭头来绘制调用流程图。

1 安装VScode

    地址： https://code.visualstudio.com/download

2 安装Theme皮肤

    在VScode里安装Theme皮肤插件，如图(1)所示：

图(1) 安装Theme皮肤

3 绘制函数调用关系

3.1 cpp函数调用关系

    每个函数头占一行，↓ 下箭头占2行，按顺序依次列出对应的函数即可。
//callList.cpp

// 1、添加设备
CDeviceListDlg::OnClickAddDevice() 
      |
      ↓
CDeviceListDlg::OnAddDevice(const DevInfoNode * pNode)  
      |
      ↓
CDataSet::Add(int bSameID, int bRedraw) 
      |
      ↓
CMsgPublisher::SendMessage(unsigned int message, unsigned __int64 wParam, __int64 lParam) 
      |
      ↓
CMainDlg::OnAddDevServer(unsigned __int64 wParam, __int64 lParam) 
      |
      ↓
CDeviceManager::AddDevice(CDevice * Dev) 

    如图(2) 所示：

图(2) 用函数头+箭头，绘制调用关系

    将callList.cpp 改名为 callList.R，去掉多余的波浪线，注释由 双斜杠 // 改为 井号 # (即 // → #)，如图(3)所示：

图(3) 将.cpp 改为.R