# [[Grafana Canvas plugin]] ## Current state of Canvas - No graphing engine; it's a freeform design surface - Elements are rendered as HTML `div`s with CSS positioning and users can drag and drop them to position them - Connections are rendered using inline SVG - Nodes are represented as JSON. No graph DSL - Structure of elements is defined as Typescript - Does not export to SVG ## Most important features ![[Grafana Canvas plugin.svg]] ### Import from standard formats You should be able to import already existing visualizations (from tools like Vizio, Excalidraw, or Dia, or perhaps some common standard like SVGs) and then just be able to overlay elements and information on top of that. ### Visually adjust elements with version control Currently, Canvas allows you to visually reposition and adjust the elements, but none of those changes are saved. Not compatible with [[GitOps]], and not easily reproducible. ### Auto-generate diagrams for common use cases Canvas should be able to generate diagrams for the most common use cases, automatically suggesting elements and settings that we think are appropriate. Maybe Canvas could have templates? If a customer already has data source in Grafana, we should be able to programmatically create a Canvas visualization for them. ### Flowcharting A way to visualize processes. ### Multiple overlays An "overlay of overlays" where you can create and individually manage layers of information. ### Easy to use Canvas is unbelievably clunky. Everyone I've spoken to who has tried it is unsure of whether it can do something they want it to do, despite playing with it. Other teams have built entirely new things ([[Asserts.ai]] [[Grafana Knowledge Graph]], hackathon flowcharting) rather than build on top of Canvas. ## Proposals ### Proposal 0: Do nothing We continue with the state of Canvas as it is and accept that Grafana cannot fulfill the demand for a spatial visualizaiton tool. ### Proposal 1: Improve Canvas The Grafana Canvas plugin already exists, so we could just improve upon it. We would start with addressing reported issues, then expand its featureset to eventually cover the things we want it to be able to do. The disadvantages of this approach would be that we'd have to do some ground work to understand who is even involved in Canvas: who works on it, who is responsible for maintaining it, and whose feelings might be ruffled when we change it. Another disadvantage is that we would have to fundamentally change the way Canvas works. We'd have to turn it from a lightweight visual editor to a full graph editor with a semantic layer, a graphing engine, and a visualization layer. ### Proposal 2: Iterate on Mesh Mesh is a hackathon project that was created by [[Natalia Bernarte]] and [[Jesse David Peterson]] that is basically an automated flowcharting engine. It uses DOT and GraphViz and has the benefit of working really well with As Code workflows, especially since [[Hashicorp Terraform|Terraform]] can output graphs in DOT format. Afaik, Mesh doesn't accept image uploads or imports of other visualization types, but we could improve it to add that feature. Next would be support for SVGs possibly. Mesh's choice of DOT + GraphViz is probably spot on in terms of interoperability and standardization. ### Proposal 3: Iterate on Knowledge Graph? Knowledge Graph already solves the networking use case, but it is Grafana Cloud only and is not available for OSS. It might be politically difficult to get the Asserts team to allow us to opensource it. ### Proposal 4: Create something else entirely ## Resources ### Meetings - [[2025-12-05 Sync with Richi about Canvas plugin]] - [[private/meeting/2025-12-17 Sync with Basti and Simon about Canvas Plugin|2025-12-17 Sync with Basti and Simon about Canvas Plugin]] ### Documents - [Proposal for network visualization solution](https://docs.google.com/document/d/1k6ekQ_cdrSbTTxd3CDo2C6qwq3h3xA_bhev8vzuLVvo/edit?tab=t.0#heading=h.9jlb22dpsttz) by [[RichiH Hartmann|RichiH]] ### Other solutions - [[Grafana Mesh]] - [[A Certified Hot Mesh Hackathon Video|hackathon video]] - [[Grafana Knowledge Graph]] from Asserts ### AI research Here are some AI-generated docs about Grafana Plugin: - [[Grafana Canvas - README]] - [[Grafana Canvas - Architecture]] - [[Grafana Canvas - Connections]] - [[Grafana Canvas - Elements]] - [[Grafana Canvas - Known Issues]] ### Other notes - [[Graph Visualization Stack]]