2018 25th Asia-Pacific Software Engineering Conference (APSEC)

DeepGraph: A PyCharm Tool for Visualizing andUnderstanding Deep Learning Models
1

Qiang Hu1 , Lei Ma2 , and Jianjun Zhao1
Kyushu University, Japan

2

Harbin Institute of Technology, China

tween the DNN source code and DNN architecture component
for visualization. Therefore, it would be important to provide atool which can support direct visualization as feedback during
DNN development. Moreover, a synchronized code mapping
between DNN source code and DNN model architecture visualization could potentially boost the DNN development cycle.
In traditional software engineering, visualization and code
mapping are generally both integrated into one supporting
tool, however, to the best of our knowledge, such tools which
include both functions are still not available for deep neuralnetworks.

Abstract—As more and more domain speciﬁc big data become
available, there comes a strong need on the fast development
and deployment of deep learning (DL) systems with high quality for domain speciﬁc applications, including many safetycritical scenarios. In traditional software engineering, software
visualization plays an important role in improving developers’
performance with various available tools. However, there arelimited visualization supports existing for DL systems, especiallyin integrated development environments (IDEs) that allow adeveloper to visualize the source code of a deep neural network(DNN) and its corresponding graph architecture. In this paper,
we propose DeepGraph, a visualization tool for visualizing andunderstanding deep neural networks. DeepGraph analyzes thetraining program to construct the graph representation of a DNN,
and establishes and maintains the linkage (mapping) between
the source code of the training program and its corresponding
neural network architecture. We implemented DeepGraph as a
PyCharm plugin and performed preliminary empirical study
to demonstrate its usefulness for understanding deep neuralnetworks.
Index Terms—Deep Learning, Visualization, Deep Neural Network, Code Mapping

In this paper, we present DeepGraph, an automated visualization and code mapping tool for constructing the data ﬂow
graph representation of the architecture from DNN sourcecode and automatically synchronize between source codeand its graph representation. DeepGraph is implemented asa PyCharm plugin for supporting TensorFlow, the current
most widely used DL framework. DeepGraph uses PyCharmembedded window to display the model’s graph, and users canﬁnd relevant code corresponding to the node by using shortcuts
after selected one node. The main contributions of this paper
can be summarized as follows:

I. I NTRODUCTION
In the past decades, deep learning (DL) experienced unprecedented rapid development and is successfully applied
to many domain speciﬁc applications. Deep neural network (DNN) plays as the core component of DL-based software. However, a deep neural network is often complex innature, with many layer components with diverse types andfunctionalities. Building a practical DNN often takes hugehuman efforts, and the development procedure is often errorprone. Currently, several DL frameworks such as PyTorch,
TensorFlow, Keras have become available, which alleviate
the development effort to some extent. Since the DNN isprogrammed in the form of traditional program (e.g., Java,
Python), the developers may easily make mistakes without in
depth thought and understanding of the target DNN to build.
When the run time behavior of a training program goes beyond
expectation, it is also difﬁcult for a developer to localize
where the issues hide. As a well established technique fortraditional software, software visualization enables the facilitation of the understanding on the software under analysis. If
the visualization of complicated DNN source code becomes
available, it could be of great value for understanding andgiving immediate feedback during DL development.
Although there is some preliminary work for DNN visualization, they treat the DNN programming and visualization
as separate processes and do not give immediate mapping be978-1-7281-1970-0/18/$31.00 ©2018 IEEE
DOI 10.1109/APSEC.2018.00079

We proposed a visualization technique of DNN which
provides a novel DL software development process. It
constructs DNN graph representation from source codefor visualization, establishes and maintains the code mapping.
• We solved two key issues to enable DeepGraph to handle
practical DNNs: a) Use a simple and effective web
structure to overcome the problem that a tool window
in PyCharm has low performance and it can not begraphically displayed with a high-performance browser
like TensorBoard [1]. b) Use keyword search technology
to do code mapping while modeling code for neuralnetworks is different from the traditional code.
• We implemented the proposed visualization technique in
DeepGraph as a plugin for PyCharm and showed theeffectiveness of it for understanding deep neural networks
through a preliminary empirical study.
•

The rest of this paper is organized as follows. Section II
compares DeepGraph with related work. Section III describes
the design, implementation and preliminary empirical resultsof DeepGraph. Section IV concludes and discusses the future
work of DeepGraph.
628

but DeepGraph uses indentation of Python and TensorFlow’s
keywords for code analysis to reduce the massive calculations.

II. R ELATED W ORK
In this section, we attempt to review the most relevant
work in three aspects: visualization of traditional software,visualization of DL models, and code mapping.

III. DeepGraph: A P Y C HARM T OOL F OR V ISUALIZINGAND U NDERSTANDING DL M ODELS
We next present the design rational, the implementation
issues, and the preliminary empirical results regarding DeepGraph.

A. Visualization of Traditional Software
In traditional software, visualization tools assist developers
to comprehend, debug, which could also generate code automatically. The widely used GUI plugin (e.g., Eclipse SWTDesigner [2]) provides visual code generation capabilities, andit supports developers to drag the components to build theirapplications. However, SWT-Designer focuses on the modular
code generation and it doesn’t contain the programming graphvisualization which is the biggest difference from DeepGraph.
There are also some PyCharm tools for visualzation, SVN
Revision Graph [3] visualizes the SVN version controller andGraph Database Support [4] visualizes the database management. Alsallakh et al. present a visualization tool [5] to help
debug the program that changes the data values to bar charts,
histograms and line chart. Compared with these three tools,
DeepGraph visualizes the data ﬂow graph instead of data
values and makes DNN models more intuitive.

A. Design
1) Workﬂow and Layout: For the development of DL
systems, although each team has its own development process,generally, the basic work ﬂow is like this: design, prepare
data, program, in most cases, after analyzing the result, adjust
hyperparameters and train the model again, then compare theresults and choose the best hyperparameters combinations forthe model. Generally, developers design the neural networks
by their experiences and draw the layers and data graph of
the network at the start of the process. In order to check theirmodels, they usually observe the training and test results at
the end of the process. Furthermore, developers may print
each layer’s data structure to judge if their models are rightor not. Developers have to use other tools to visualize themodel if it is necessary. When PyCharm and Tensorﬂow areused to do this work, the traditional work ﬂow is shownin “Fig. 1”. We can ﬁnd that three processes (coding,build
and run, result in the console and analysis) are in PyCharm,
while the visualizing process is out of it. This is obvious
inconvenient for developers.
In this work, we aim to make the entire development processeasier, so making the visualization process be in the same toolwith the coding and other processes is a task of DeepGraph.
To achieve it, we add DeepGraph as a visualization plugin

B. Visualization of DL Models
Visualizing the neural network model is already an active
research topic during the last several years. There are sometools provide graph visualization capabilities such as TensorBoard, which is a part of the TensorFlow machine intelligenceplatform. And the Netscope [6], an online visual tool that
supports the neural network structure described by the prototxt
format, is also a tool for DL visualization. However, both ofthem visualize by using another platform after the model isbuilt while DeepGraph dose not need to use another platform
to visualize. There are some other works for visualizing
neural networks [7], [8], which target to visualize in speciﬁc
directions and do not present the workﬂow of the model.
Recently, the Neural Network Console [9] released by Sonyuses visual technology to build, train and test models, but it’scompletely out of the code. For understanding DL models,Guo et al. make a review of various DL approaches and theirrecent developments [10]. What differs DeepGraph from theseworks is that DeepGraph aims to combine both code andgraphics to help developers to understand DL models.

 


  

    


 

        

C. Code Mapping
Code mapping function needs to analyze source code.
There are some methods to analyze code, the basic control
ﬂow analysis [11] presented by Allen is widely used, it
checks the branches and loops of the program and thengives information about all possible paths and dependencies
between the statements, and also expends to higher-orderlanguages. Another widely used method is data ﬂow analysis[12] which collects the semantic information of the programfrom the program code and determines the deﬁnition and useof variables at compile time through algebraic methods. These
analysis methods work for the entire structure of the code!

"

Fig. 1. Traditional work ﬂow of DL development in PyCharm.

into PyCharm. DeepGraph visualizes the graph at the sametime of the training period which is depicted in “Fig. 2”.
After training the model, the model structure is displayed in
the PyCharm tool window and developers can observe them
directly. To better understand the connection between models
and their code, ﬁnd code blocks quickly, DeepGraph’s further
work is to inversely correlate graph and code. To do so, acorresponding relationship between code and a mouse listener629

are added to each node of the visualization graph for listening
users’ actions. When the mouse cursor over the node and theuser presses the shortcut, DeepGraph will highlight the code
it related.

previous step. Then follow these steps to build our data
structures:a) Convert the node whose data structure is tf .node
to a normal array Nodes and set its structure as[nodeName, groupName]. The ﬁrst data in Nodes is thenode’s name and the second one is the node’s group. And
so as the edge, convert it as Edges[nodeA, nodeB ] .
b) Each tf .node has a direct parent attribute and we extract
it as a group data. Create a new array Groups to save thegroup data and set its data sructure as [groupA, groupB ]. Theninitialize Groups as [group].
c) The Nodes and Edges are used for searching but notfor drawing due to that they contain all the data we needwhich can not be changed. Therefore, we create a new arraydrawEdges to save the edges used for drawing, and in fact
the Groups stored content is the same as Nodes’s, the reason
is if one node has a child, it can be treated as a group, so we
use Groups’s data for drawing.
Initial and update drawing data. In the tf .node, if thenodes belong to the highest level, they don’t have parent andtheir parent attributes are set as root . In our work, wechange it as group and set it as the initial data of Groups.
We initialize and update the Groups and drawEdges throughfollowing steps:a) Find the nodes. Traverse the Nodes and Groups,
for each of Groups, search all the nodes and ﬁnd that
if NodenodeB == groupA, then add it to the Groups as[NodenodeA , groupA].
b) Find the edges. The array Edges contains all the nodeto-node edges, but there are only one edge to connect two
nodes in our design. One node may have children, so thedata in Edges can not be used directly. Find the edges whichconnect two groups in the array Groups, then add them to thedrawEdges which are used as the drawing data, and we use
the Algorithm 1 to do it.

 


  

            

 

Fig. 2. The workﬂow of DL development in PyCharm used DeepGraph.

Functionality, performance and convenience are all the mostimportant metrics of a plugin and they are what we mostconcerned about. We add DeepGraph’s window to the toolbar
on the right side of PyCharm like the SciView. In addition,
we add a tool button (in View - Tool Windows) to control
the activation/inactivation. When DeepGraph is activated, thegraphic display window will occupy the right side of the code
edit bar, and users can freely adjust the size and position ofthis window. The graph drawn by DeepGraph also displays
the model hierarchically like the other tools. In the initialstate, DeepGraph just draws the overall neural network hierarchy(e.g., layer1, input), and the layout can be updated
by users. For performance reasons, we only show the mostimportant information(e.g., nodes, edges) on the graph. About
the node-to-code mapping function, we use PyCharm’s code
highlight technology to showcase the results from the codeanalysis.
DeepGraph has two main functions: visualization and code
mapping, the key point of the implementation of these twoparts is basically different.
2) Visualization: Although GUI programming can do thiswork, in order to have better scalability, we draw the graphics
onto the web page. However, ﬁnding a web engine that can beembedded in PyCharm is a challenge that must be overcome.
Another challenge is that a multi-level nested web structure is
hard to use in building the web because of the performance
limitations of integrated environment. We intend to use theleast page hierarchy to complete this work. We visualize
TensorFlow graphs thought the follow steps:
Get graph data. To use the DeepGraph, users need tocall Tensorﬂow APIs in their code to save summaries to log
ﬁles. At the training process, the models’ event data (data ﬂow
information, training and validation accuracy of each epochs
et al,) will be saved in the log ﬁles. When DeepGraph runs,
it searches and loads the log ﬁles, then gets the data ﬂow
information as graph data for the next step.
Construct the graphical structure. We extract two arrays
node and edge from the data structure that we get in the

Algorithm 1 ﬁndEdges
1: TemGroups ← Groups;
2: Delete groups: groups ∈ TemGroups &&3:
groupsparent ∈ TemGroups;
4: GroupNum ← number of TemGroups;
5: for edge in Edges do
6:
for i = 0 to GroupNum do
7:
for j = i + 1 to GroupNum do
8:
if TemGroups[i][0] ∈ edge&& TemGroups[j][0] ∈ edge then9:
Add edge to drawEdges;
10:
else
11:
Iterate over the children of
12:
TemGroups[i][0] and TemGroups[j][0],13:
if ﬁnd, break;14:
end if15:
end for16:
end for17: end for

630c) When users double click on a node, DeepGraphwill search the information of it from Nodes and add[Nodeclicked , Groupclicked ] to the Groups, and then repeat
steps a through b.
d) When users double click on a group, DeepGraph will delete all the groups in the Groups whichGroupgroupB == Groupclicked , and then repeat steps athrough b.
e) Use Groups and drawEdges data as the drawing data tovisualize the graph, when data changed, refresh all the graphs
to do re-drawing.
3) Code Mapping: Code mapping is a complicated work.
In most cases, abstract syntax trees are used for source codeanalysis which need to convert source code to a tree diagram,and each node on the tree represents a structure in the sourcecode. But in this work, we target the Python version of
TensorFlow for node-to-code mapping. Therefore, the corething we need to know is the part of code that generates
the node. In general, the code in this part doesn’t have many
conditional branches, so we can analyze it at the code level.
When TensorFlow is used to do the DL development, thesource code can be roughly divided into three parts. The ﬁrst
part uses TensorFlow’s API to build the model(e.g., numberof layers, structure of each layer), deﬁnes the data type of the
input and output. The second part loads the data from ﬁles,
processes the data then converts it to the data type and structureof the model’s input. And the third part sets hyperparameters(e.g., epochs, batch size) for model training and then trains
the model. Since DeepGraph only visualizes the data ﬂow for
the DL model, the nodes for the process of data preprocessing
are unnecessary to be considered. The program mode of DL,
where one model needs massive data for training, is different
from the traditional one. As it’s difﬁcult to track changes andﬂows of each data, we just care about the data structure ofeach node. It means in our mapping work, it’s unnecessary toinclude logic code of the second part, we can selectively skip
it. In fact, DeepGraph’s mapping function only covers the ﬁrst
part of code and all the variables.
In order to avoid massive calculations in the interaction
process, we construct the correspondence between nodes andcode immediately when the plugin runs. DeepGraph’s code
mapping works as follows: First of all, it removes all comments from the source code, since we need to locate the exact
location of the code, it replaces the text in the comment witha character ’T’. Then it uses Python’s indentation feature toblock the code and divide all the code by scope, saves it
as map. Then it executes a simple algorithm as shown in
Algorithm 2 to get the map that stores all possible node names
and corresponding code intervals. Finally, when the front endof the graphic transmits the node name, the back end of plugin
searches directly in this map and then highlights the code.

Algorithm 2 BUILD RELATIONSHIP(Code, lineN um)
1: Initialize
KeyWordMaps[keyword, position],
Functions[name, parameters], Variables[name, value],
FunctionObjs[name, parameters], TFKeyWords[];
2: for i = 0 to lineNum do
3:
if function deﬁnes or variable deﬁnes then4:
update Functions or Variables;5:
end if
6: end for
7: Processing Variables, only retains variables
and real values(e.g., [A, ”a”]);
8: for i = 0 to lineNum do
9:Find the function call which ∈ Functions,add it to FunctionObjs;
10: end for
11: for key in KeyWordMaps do
12:
for i = 0 to lineNum do
13:
if key ∈ Code[i ] then14:
if Code[i] in function part then15:
ﬁnd the function call in FunctionObjs, add
the name in FunctionObjs and position to
KeyWordMaps;
16:
else
17:
add the name in this key word part andposition to KeyWordMaps;18:
end if19:
end if
20:
end for
21: end for
22: return KeyW ordM aps;

we use the backend of TensorBoard to parse the log ﬁlesgenerated by the model. Since the IntelliJ plugin development
can only use Java language, to run the Python code, DeepGraph uses com.intellij.execution.RunManagerEx to call the
program execution interface to run the back end Python codeﬁrst to get the data by using the conﬁguration that the users’
environment used. We also use Intellij’s OpenAPI to build theplugin and JavaFX’s WebEngine as a platform for drawing
graphics. We create a drawing board on the web page by using
D3.js and use Dagre-d3 to implement automatic layout ofnodes and edges which acts as a front-end to dagre, providing
actual rendering using D3. And we update the layout using
the methods mentioned in the previous Visualization section.
At the beginning of the plugin’s running, we use
the Algorithm 2 to generate a map. Then we use the
netscape.javascript.JSObject library and the function setMember to implement mutual calls between Java and JavaScript.
Moreover, code highlight function implemented via feedback
from the graphical listener and using the methods deﬁned incom.intellij.codeInsight.highlighting.HighlightManager.

B. Implementation
We implemented DeepGraph as a PyCharm plugin andpublished it as an open-source1 . To get the graph information,
1 https://github.com/wellido/DeepGraph

631

C. Preliminary experimental results
We use example code in TensorFlow’s GitHub as our sourcecode to test DeepGraph at this stage. Firstly, we run the code
to build a model and generate log ﬁles. Secondly, we activate
DeepGraph by using shortcut or clicking button in the tool
bar as shown in Fig.3. Thirdly, we use shortcut to activate
DeepGraphView. One of the visualization results are shown in
Fig.4. Finally, we test the code mapping function. Currently
we have added two TensorFlow keywords tf.name scope andtf.placeholder to our node-to-code mapping algorithm. After
selecting a node by mouse cursor, and using shortcut to activate the mapping action, the corresponding code is highlighted
as shown in Fig.5. We can also verify our visualization resultsby the code mapping function.

Fig. 5. Node-to-Code mapping in DeepGraph.

the time developers waste in tool conversions. And we alsopresent a simple node-to-code algorithm that is easy to extend.
In the future, we would like to solve the limitations ofcurrent DeepGraph. We would like to solve the problem
that the path of log ﬁles is speciﬁed and will add all the
TensorFlow’s keywords for comprehensive code mapping. We
also consider to extract the model structure by using one
training data before drawing the graph in order to save thetime for training.
ACKNOWLEDGMENT
Fig. 3. DeepGraph registration location.

This work was partially supported by 973 Program in China(No. 2015CB352203) and JSPS KAKENHI Grant 18H04097.
R EFERENCES[1] K. Wongsuphasawat, D. Smilkov, J. Wexler, J. Wilson, D. Mané,
D. Fritz, D. Krishnan, F. B. Viégas, and M. Wattenberg, “Visualizing
dataﬂow graphs of deep learning models in tensorﬂow,” IEEE transactions on visualization and computer graphics, vol. 24, no. 1, pp. 1–12,
2018.
[2] D. Rubel, J. Wren, and E. Clayberg, The Eclipse Graphical Editing
Framework (GEF). Addison-Wesley Professional, 2011.
[3] D. Batrak, “Svn revision graph,” https://plugins.jetbrains.com/plugin/6178-svn-revision-graph, accessed Nov 07, 2014.
[4] V. Dmitry and K. Sergey, “Graph database support,” https://plugins.
jetbrains.com/plugin/8087-graph-database-support, accessed Jun 29,
2018.
[5] B. Alsallakh, P. Bodesinsky, S. Miksch, and D. Nasseri, “Visualizing
arrays in the eclipse java ide,” in 2012 16th European Conference on
Software Maintenance and Reengineering (CSMR). IEEE, 2012, pp.
541–544.
[6] Netscope, “Netscope-neural network visualizer,” http://ethereon.github.
io/netscope/quickstart.html, accessed July 19, 2017.
[7] J. Yosinski, J. Clune, A. Nguyen, T. Fuchs, and H. Lipson, “Understanding neural networks through deep visualization,” arXiv preprint
arXiv:1506.06579, 2015.
[8] M. D. Zeiler and R. Fergus, “Visualizing and understanding convolutional networks,” in European conference on computer vision. Springer,
2014, pp. 818–833.
[9] Sony, “Neural network console,” https://dl.sony.com//.
[10] Y. Guo, Y. Liu, A. Oerlemans, S. Lao, S. Wu, and M. S. Lew, “Deeplearning for visual understanding: A review,” Neurocomputing, vol. 187,
pp. 27–48, 2016.
[11] F. E. Allen, “Control ﬂow analysis,” in ACM Sigplan Notices, vol. 5,
no. 7. ACM, 1970, pp. 1–19.
[12] F. E. Allen and J. Cocke, “A program data ﬂow analysis procedure,”
Communications of the ACM, vol. 19, no. 3, p. 137, 1976.

Fig. 4. DeepGraphView.

Preliminary work of DeepGraph has achieved uniﬁed DL
development platform. Now it’s unnecessary to use a second
platform to visualize the model but just use PyCharm. And thenode-to-code function allows developers to get feedback fromgraphics which is not available in other visualization tools. All
the information makes us believe that it is necessary to carryout further development.
IV. C ONCLUSION AND FUTURE WORKIn this paper, we have presented DeepGraph, a PyCharm
tool which combines visualization and code mapping functions for the Python version of TensorFlow. Beneﬁting fromcombining coding with visual analysis, DeepGraph reduces632