Viewing and Export
Navigate graph diagrams with pan and zoom. Export to SVG and PNG formats. Embed diagrams in pages and marketing sections.
The graph diagram viewer provides interactive navigation with pan, zoom, and node selection. Export diagrams as SVG or PNG images for use in presentations and external documentation.
Try It: Interactive Example
Use this diagram to explore viewer features. Click anywhere on the diagram to enable zoom, then use your mouse wheel to zoom in and out. Double-click on the Customer node (blue) to select it and view its properties in the right panel. Try the controls in the top-right corner to toggle the nodes list, zoom to fit, or switch between light and dark themes.
Viewer Controls
The viewer displays control buttons in the top right:
Navigation
Pan and Zoom
| Action | Effect |
|---|---|
| Left drag | Pan the view |
| Right drag | Pan the view (alternative) |
| Mouse wheel | Zoom in/out (after clicking to activate) |
Node Selection
| Action | Effect |
|---|---|
| Double-click a node | Select and show properties/links |
| Double-click background | Deselect |
Left Panel: Nodes List
The nodes list panel shows all nodes in the diagram:
Right Panel: Properties
When a node is selected:
Export Options
Export diagrams from the editor toolbar:
Embedding Diagrams
Embedding Properties
| Property | Description |
|---|---|
| Section Title | Header text above the diagram |
| Section Title Colour | Header text colour |
| Section Subtitle | Subheader text |
| Diagram ID | Reference to the diagram file |
| Height | Canvas height (default 500px) |
| Background Colour | Section background |
| After Text | Footer text below the diagram |
Theme Considerations
When exporting or embedding:
Cypher Export
Graph DB mode diagrams can be exported to Neo4j Cypher DDL for database deployment. See the dedicated Cypher Export guide for details on constraint generation, index creation, and relationship templates.