When developing a Dialogflow agent, have you ever drawn a diagram of intents trying to create a good conversational experience for your app? I certainly have. I would later transform this hand-drawn diagram into a Dialogflow agent, hoping I didn’t make mistakes. What if there was a way to see how intents are connected in your Dialogflow agent?
The Dialogflow Agent Visualization Tool, i.e. dfvis, allows you to display your Dialogflow agent as an HTML rendered graph, where nodes are the intents and edges exists if it’s possible to go from intent A to intent B during a conversation.
The software is currently in alpha
- Works only with agents whose primary language is English
- Doesn’t properly connect nodes that set output context in a fulfillment webhook.
dfvis is a command-line tool that you can install via NPM:
npm install -g dfvis
Then,
dfvis /path/to/dialogflow-agent-folder/ -o /path/to/output/file
dfvis takes a path to a folder containing Dialogflow agent that can be obtained from Dialogflow console by selecting “Import as ZIP”. Note, you will need to unzip the downloaded file.
See full help message below,
$ dfvis -h
usage: dfvis [-h] [-v] [-o OUT] file
DialogFlow visualizing software
Positional arguments:
file Path to a folder with DialogFlow agent.
Optional arguments:
-h, --help Show this help message and exit.
-v, --version Show program's version number and exit.
-o OUT, --out OUT Name of the file where to redirect the output.
The tool parses intents from agent/intents/ folder of a Dialogflow agent. Then, the graph is created where edge (A,B) exists between intent A and intent B if and only if one of the following cases is satisfied:
- B doesn’t have any input contexts
- Set of output contexts of A contains is a superset of input contexts of B
The resulted graph is then rendered into HTML usingvis.js link as the visualization engine.
See examples folder for generated HTML files for the following open-source samples:
- official Actions on Google sample “Number Genie”
- official Actions on Google sample “Facts About Google”
This software is Copyright 2018, Aza Tulepbergenov, and available under MIT license (see LICENSE).
I welcome feedback and contributions. I tried to write code using well-known OO design patterns: Builder (building a graph), Strategy (generating edges between nodes in a graph) and Visitor (codegen). Hopefully, this will help the reader understand the code structure.
Please submit issues here.