使用VS Code插件Graphviz Preview来画图

安装

1. VS Code的安装，自行百度
2. 安装Graphviz，自行百度
3. 在VS Code下安装Graphviz Preview插件，Ctrl+Shift+P或者Ctrl+P后输入>找到Preferences:Open Settings(JSON),增加一行“"graphvizPreview.dotPath": "C:\Program Files (x86)\Graphviz2.37\bin\dot.exe"”（注意该路径可能需要改一下）

{
    "workbench.startupEditor": "newUntitledFile",
    "C_Cpp.updateChannel": "Insiders",
    "editor.minimap.enabled": false,
    "workbench.sideBar.location": "left",
    "python.pythonPath": "C:\\Python27\\python.exe",
    "graphvizPreview.dotPath": "C:\\Program Files (x86)\\Graphviz2.37\\bin\\dot.exe"
}

使用栗子

1. 新建.gv结尾的文本文件，用VS Code打开
2. 输入下面的代码后保存，使用预览窗口可以看到画好的图

digraph finite_state_machine {
    rankdir=LR;

    node[fixedsize = true,shape = doublecircle,width=1.2,color =green];
    IDLE

    IDLE->IDLE;

    edge[];

    subgraph a{
        node[fixedsize = true,shape = doublecircle,width=1.2,color =red];
        START_W 
        SEND_CTRL_BYTE_W[label = "SND_CB_W"]
        RECEIVE_ACK_1_W[label = "RSV_AK1_W"]
        RECEIVE_ACK_2_W[label = "RSV_AK2_W"]
        RECEIVE_ACK_3_W[label = "RSV_AK3_W"]
        SEND_ADDR_BYTE_W[label="SND_ADD_W"]
        SEND_DATA_BYTE_W[label="SND_DAT_W"]
        STOP_W

        IDLE->START_W[label=""];

        START_W->SEND_CTRL_BYTE_W[label=""];
        START_W->START_W;

        SEND_CTRL_BYTE_W->RECEIVE_ACK_1_W;
        SEND_CTRL_BYTE_W->SEND_CTRL_BYTE_W;

        RECEIVE_ACK_1_W->RECEIVE_ACK_1_W;
        RECEIVE_ACK_1_W->SEND_ADDR_BYTE_W;

        SEND_ADDR_BYTE_W->SEND_ADDR_BYTE_W;
        SEND_ADDR_BYTE_W->RECEIVE_ACK_2_W;

        RECEIVE_ACK_2_W->RECEIVE_ACK_2_W;
        RECEIVE_ACK_2_W->SEND_DATA_BYTE_W;

        SEND_DATA_BYTE_W->SEND_DATA_BYTE_W;
        SEND_DATA_BYTE_W->RECEIVE_ACK_3_W;

        RECEIVE_ACK_3_W->RECEIVE_ACK_3_W;
        RECEIVE_ACK_3_W->STOP_W;

        STOP_W:n->IDLE:ne;
    }
//********************************************
//Receive
//********************************************
    subgraph b{

        node[fixedsize = true,shape = doublecircle,width=1.2,color =blue];
        START_R_1;
        SEND_CTRL_BYTE_1_R[label = "SND_CB1_R"]
        SEND_CTRL_BYTE_2_R[label = "SND_CB2_R"]
        RECEIVE_ACK_1_R[label = "RSV_AK1_R"]
        RECEIVE_ACK_2_R[label = "RSV_AK2_R"]
        RECEIVE_ACK_3_R[label = "RSV_AK3_R"]
        SEND_ADDR_BYTE_R[label="SND_ADD_R"]
        RECEIVE_DATA_R[label="RSV_DAT_R"]
        START_R_2


        IDLE->START_R_1[label=""];

        START_R_1->START_R_1;
        START_R_1->SEND_CTRL_BYTE_1_R;

        SEND_CTRL_BYTE_1_R->SEND_CTRL_BYTE_1_R;
        SEND_CTRL_BYTE_1_R->RECEIVE_ACK_1_R;

        RECEIVE_ACK_1_R->RECEIVE_ACK_1_R;
        RECEIVE_ACK_1_R->SEND_ADDR_BYTE_R;

        SEND_ADDR_BYTE_R->SEND_ADDR_BYTE_R;
        SEND_ADDR_BYTE_R->RECEIVE_ACK_2_R

        RECEIVE_ACK_2_R->RECEIVE_ACK_2_R
        RECEIVE_ACK_2_R->START_R_2

        START_R_2->START_R_2
        START_R_2->SEND_CTRL_BYTE_2_R

        SEND_CTRL_BYTE_2_R->SEND_CTRL_BYTE_2_R
        SEND_CTRL_BYTE_2_R->RECEIVE_ACK_3_R

        RECEIVE_ACK_3_R->RECEIVE_ACK_3_R
        RECEIVE_ACK_3_R->RECEIVE_DATA_R

        RECEIVE_DATA_R->RECEIVE_DATA_R
        RECEIVE_DATA_R->STOP_R

        STOP_R:s->IDLE:se
    }

//********************************************
//
//********************************************
    
}