Skip to content

interactive-features.en.mdx

Latest commit

 

History

History
166 lines (122 loc) · 3.52 KB

interactive-features.en.mdx

File metadata and controls

166 lines (122 loc) · 3.52 KB
Raw
title Interactive Features
description Pan/zoom, tooltips, and touch controls for HTML output

HTML format output provides interactive features.

HTML Output

npx @shumoku/cli render network.yaml -f html -o diagram.html

Pan & Zoom

Action Result
Mouse wheel Zoom in/out
Drag Pan (move)
Double-click Reset view

Touch Devices

Action Result
Pinch Zoom in/out
One-finger drag Pan (move)
Double-tap Reset view

Tooltips

Hover over links to see detailed information in tooltips:

  • Connected endpoints (device:port)
  • VLANs

Device Modal

Click on a node to display device details in a modal:

  • Device name
  • Type
  • Vendor/Model
  • Metadata

Toolbar

HTML output includes a zoom control toolbar:

  • + Zoom in
  • - Zoom out
  • Reset Fit to view

Hide Toolbar

When using from TypeScript:

import { renderGraphToHtml } from 'shumoku'

const output = await renderGraphToHtml(graph, {
  toolbar: false
})

Hierarchical Navigation

When using Multi-file Configuration:

  • Click a subgraph → Navigate to detail sheet
  • Back button → Return to parent sheet
  • Breadcrumbs → Navigate to any level

Branding

By default, a "Powered by Shumoku" link appears in the bottom right.

To hide it:

const output = await renderGraphToHtml(graph, {
  branding: false
})

SVG data Attributes

SVG elements have data attributes for JavaScript manipulation:

<!-- Node -->
<g class="node"
   data-id="router-1"
   data-device-type="router"
   data-device-vendor="yamaha"
   data-device-model="rtx3510">

<!-- Link -->
<g class="link-group"
   data-link-id="link-1"
   data-link-from-standard="10GBASE-T"
   data-link-to-standard="10GBASE-T"
   data-link-vlan="100,200">

Control data Attributes

import { svg } from 'shumoku'

const output = svg.render(graph, layout, {
  renderMode: 'interactive',
  dataAttributes: {
    device: true,      // Device info
    link: true,        // Link info
    metadata: true     // Output metadata as JSON
  }
})

JavaScript API

When embedding in HTML, you can control from JavaScript:

import { renderGraphToHtml } from 'shumoku'

const output = await renderGraphToHtml(graph)
document.getElementById('container').innerHTML = output

// Get the interactive instance
const instance = window.shumokuInstance

// Programmatic control
instance.showDeviceModal('router-1')    // Show device modal
instance.hideModal()                     // Close modal
instance.showLinkTooltip('link-1', x, y) // Show tooltip
instance.hideTooltip()                   // Close tooltip
instance.resetView()                     // Reset view
instance.getScale()                      // Get current zoom level
instance.navigateToSheet('sheet-id')     // Navigate sheet (hierarchical)
instance.destroy()                       // Clean up event listeners

Output Format Comparison

Feature SVG HTML PNG
Pan/Zoom No Yes No
Tooltips No Yes No
Touch controls No Yes No
Hierarchical navigation No Yes No
File size Small Medium Large
Editable Yes No No
Document embedding Yes iframe Yes

Next Steps

Output options details Sample network collection