Spot the Difference with LLVM-FLOW: an open-source interactive visualization tool for comparing IR CFGs


0. Preface

The LLVM project is a collection of compiler and toolcahin technologies that are modular and reusable. LLVM aimed to develop a modern compilation strategy based on SSA(Static Single Assignment) capable of supporting both static and dynamic compilation for any programming language. [1]

LLVM IR(Intermediate Representation) is an intermediate language used bye the LLVM. It serves as a coommon representation between the front-end, which translates the source code of a programming language into LLVM IR, and the back-end, which generates the machine code specific to a particular target architecture. [1]

By using LLVM IR as an intermediate step, the LLVM can perform various optimizations and transformations on the code. This includes analyses such as constant propagation, dead code elimination, loop optimizations etc.
Once an IR is passed through the llvm optimizer, passes (which are libraries that can modify the IR or do specific calculations with it, and there are dozens of them) are applied to create a new IR.

In ML2, we worked on finding the optimal combination of passes through Reinforcement Learning, and in the process created LLVM-FLOW, a tool that can be used for debugging.

This post is a summary of my talk at EURO LLVM Developers' Meeting 2023.

1. Control Flow Graph(CFG)

First, let's breifly talk about what CFG in LLVM and why we created LLVM-FLOW.

A Control Flow Graph(CFG) is a directed graph that represents the program's control flow, where nodes represent basic blocks, and edges represent the flow of control between those blocks.[2]

Representing LLVM IR as a CFG allows for efficient analysis and optimization of code, as it enables the identification of potential bottlenecks.

We can visualize the CFG as below uing LLVM optimizer analysis pass -dot-cfg and -view-cfg. [3]

However, comparing CFGs before and after optimization using those passes can be challenging, as the CFG can be drastically different after optimization.

Here are two pictures. One is CFG before optimization, the other is after.
Can you tell what has changed?
It is not easy to see the changes at a glance.


2-1. Introduction

LLVM-FLOW is developed to easy the difficulty.
โœ… LLVM-FLOW is a visualization tool for comparing IR CFGs.
โœ… It has interactive web-based interface,
โœ… and is also open-source.

2-2. Key features

One key feautre of LLVM-FLOW is highlighting nodes that remain unchanged after optimization.

Here's and example: On the left is a CFG before optimization and on the right is a CFG after optimization.

The same CFGs can be visualized in LLVM-FLOW like this :
It is easier to see the changes and more intuitive because the modified parts are more identifiable, as the unchanged nodes are highlighted in purple.

If you want to know exactly which nodes are the same, just click the node!
The color of corresponding node in other CFG will change.

We can see all the contents of the basic block by double-clicking the node or switching the mode to detail.

LLVM-FLOW even works fine with a large number of nodes.

2-3. How to get started?

There are two ways to get started with LLVM-FLOW.

  1. simply visiting the LLVM-FLOW website
  2. running it directly on local environment using Docker.
    • Clone the LLVM-FLOW github repository:
      git clone
    • Build the Docker image:
      docker build -t llvm-flow .
    • Run the Docker container:
      docker run -p 8000:8000 -p 3000:3000 llvm-flow
    • This will start the application on http://localhost:3000

3. Demo

Let me show you a demo.


  • First, open the LLVM-FLOW webiste. You don't need any sign-up or sign-in. Just go to the 'start' page.
  • Choose the file format you want among c, cpp and ll.
  • Enter username you want, choose the file to uploa,d and enter the LLVM optimizer passes.

That's it! Then LLVM-FLOW will immediately draw CFGs, and we can use it interactively.
And when you go to the 'board' page, you can search the CFGs you uploaded and check them again.

There are more fantastic features; please see the tutorial !

4. Conclusion

In summary, LLVM-FLOW is an open-source tool that enables easy comparison of changes in the CFGs.

With your feedback and participation, we hope LLVM-FLOW grows into a project that contributes to the LLVM community : )


๐Ÿ—‚๏ธ euroLLVM2023 Talk ppt






Jinmyoung LEE

Research Engineer

githubย ย ย github