How to Visualize Knowledge Graphs for LLMs with yFiles

The hidden challenge in LLM development

How knowledge graph visualization enhances LLM development

Visualizing LlamaIndex knowledge graphs with Create Llama and yFiles

Practical Integration of yFiles in Create Llama

Step-by-step guide

The basic steps on how to integrate yFiles in LlamaIndex

1. Create a new project with Create Llama.

   Use the Create Llama CLI to create a new project with the options specified in its tutorial

   • npx create-llama@latest

2. Obtain a free yFiles evaluation package.

   To use yFiles, get a free evaluation package here.

3. Create a designated area in Create Llama's frontend application.

   The yFiles graph component only requires a container element where the graph should be visualized. For example in the Create Llama frontend, create a new designated container element (see page.tsx) that holds our element:

   <div className="w-[70%] w-full ml-4 bg-white rounded-xl shadow-xl">
     <KnowledgeGraph />
   </div>
   

4. Create a yFiles GraphComponent.

   A yFiles GraphComponent can be easily integrated in any HTML5 supporting framework by providing a container element to the GraphComponent constructor. For example, in React, a useMemo in combination with a useLayoutEffect is a possible solution as demonstrated in use-graph-component.ts:

   // create the GraphComponent 
   const graphComponent = useMemo(() => {
     // include the license
     License.value = yFilesLicense
     // initialize the GraphComponent
     const gc = new GraphComponent()
     // use out of the box interactivity
     gc.inputMode = new GraphViewerInputMode()
     return gc
   }, [])

   // append it in the DOM
   useLayoutEffect(() => {
     const gcContainer = graphComponentContainer.current!
     graphComponent.div.style.width = '100%'
     graphComponent.div.style.height = '100%'
     gcContainer.appendChild(graphComponent.div)
   
     return () => {
       gcContainer.innerHTML = ''
     }
   }, [graphComponentContainer, graphComponent])
   

5. Provide structured node and edge data.

   In the Python backend, the knowledge graph provides access to node and edge lists that is all that is needed to create a graph visualization (see getData.py):

   def get_knowledge_graph_info(params=None):
     index = get_index()
     nodes = index.property_graph_store.graph.nodes
     edges = index.property_graph_store.graph.triplets
     return {'nodes': create_node_list(nodes), 'edges': create_edge_list(edges)}
   

6. Request knowledge graph data in the frontend.

   The GraphComponent in the frontend requires structured node/edge data to create a graph. This can be requested from the backend:

   const fetchKnowledgeGraph = async () => {        
     const response = await axios.get(`${backend}/api/knowledge_graph/knowledge-graph`);
     setKnowledgeGraph(response.data.graph_info);
   }

   yFiles' GraphBuilder can be configured to the structure of the provided data and manages build and update of the graph, for details, see use-graph-builder.ts.

7. Add more yFiles features as needed.

   yFiles' extensive documentation, developer's guide and source code demos provide an easy way to add more sophisticated features as needed. Common features for a knowledge graph visualization are illustrated in https://github.com/yWorks/yfiles-graph-for-create-llama:

   • Data-driven coloring of nodes and edges
   • Showing more context information on selection or hover of a graph item
   • Automatic circular arrangement of graph items
   • Interactive exploring of the local neighborhood of nodes by double click

   For more details, see the source code of this Create Llama project or the yFiles' source code demos.

8. Run the project.

   Run backend and frontend as described in the Create Llama documentation.

For a detailed implementation, follow the instructions and source code in the designated GitHub repository which contains a runnable project:
https://github.com/yWorks/yfiles-graph-for-create-llama