yFiles for HTML

https://github.com/yworks/yfiles-for-html-demos
Admin
yFiles for HTML is a commercial software programming library for the visualization of graphs,...
Tokens:127,869
Snippets:2,241
Trust Score:8.3
Update:2 months ago
Show doc for...
Tokens:
Raw
### Start Layout Server

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/nodejs/index.html

Commands to install and start the layout server.

```bash
> npm install
> npm start
```

--------------------------------

### Start the demo

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/webworker-webpack/README.md

Launch the development server to run the demo.

```bash
> npm start
```

--------------------------------

### Start the GraphQL server

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/toolkit/graphql/index.html

Commands to install dependencies and launch the local Express server.

```bash
npm install
npm start
```

--------------------------------

### Install dependencies

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/vite/README.md

Install the required npm modules in the demo directory.

```bash
> npm install
```

--------------------------------

### Build and serve for production

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/vite/README.md

Build the project for production and start the production server.

```bash
> npm run build
> npm run serve
```

--------------------------------

### Start development server

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/vite/README.md

Launch the Vite development server.

```bash
> npm run dev
```

--------------------------------

### Build and Run Commands

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/rollupjs/README.html

Commands to install dependencies and execute the build process for the Rollup.js demo.

```bash
npm install
npm run build
```

--------------------------------

### Define Initial Node Data

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/tutorial-graph-builder/05-implicit-grouping/index.html

Example dataset containing items with paths and nested children.

```javascript
[
  { id: 'item0', path: '/root/dir1/dir1' },
  {
    id: 'item1',
    path: '/root/dir1/dir2',
    children: [
      {
        id: 'child1',
        children: [
          { id: 'child11', children: [{ id: 'child14' }, { id: 'child15' }] },
          { id: 'child12' }
        ]
      },
      { id: 'child2', children: [{ id: 'child13' }] }
    ]
  }
```

--------------------------------

### Instantiate and Configure Custom Styles

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/tutorial-style-implementation-edge/05-making-the-style-configurable/index.html

Demonstrates how to initialize the custom style with specific values or update them at runtime.

```javascript
// the distance can be specified in the constructor
const style1 = new CustomEdgeStyle(5)

// the distance can also be changed later using the property on the style class
const style2 = new CustomEdgeStyle(1)
style2.distance = 3

// not specifying the distance will use the default value
const style3 = new CustomEdgeStyle()
```

--------------------------------

### Create Ports and Edges

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/tutorial-yfiles-basic-features/02-graph-element-creation/index.html

Demonstrates creating ports at specific node locations and connecting them with an edge.

```javascript
// Create a port in the center of the node layout
    const port1AtNode1 = graph.addPort(node1, FreeNodePortLocationModel.CENTER)
    
    // Create a port at the middle of the left border
    // The location is interpreted as absolute coordinates
    const port1AtNode3 = graph.addPortAt(
      node3,
      new Point(node3.layout.x, node3.layout.center.y)
    )
    
    // Create an edge that connects the two ports
    const edgeAtPorts = graph.createEdge(port1AtNode1, port1AtNode3)
```

--------------------------------

### Define Node Layout Data

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/tutorial-graph-builder/10-configure-layout/index.html

Example structure for a dataset containing node layout properties.

```typescript
const nodeData: NodeLayoutData[] = [
  { id: '00', layout: { x: 110, y: 20, width: 30, height: 30 } },
  { id: '01', layout: { x: 145, y: 95, width: 30, height: 30 } },
  { id: '02', layout: { x: 75, y: 95, width: 30, height: 30 } }
]
```

--------------------------------

### UI Initialization and Layout Configuration

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/style/html-controls/index.html

Imports the UI initialization module and sets the CSS variable for the description width.

```javascript
import '@yfiles/demo-app/initialize-ui'
```

```css
:root { --description-width: 400px; }
```

--------------------------------

### Subclassing EdgeStyleBase for Custom Edges

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/tutorial-style-implementation-edge/01-create-a-polyline/index.html

The starting point for a custom edge style implementation by extending the EdgeStyleBase class.

```typescript
export class CustomEdgeStyle extends EdgeStyleBase {
  protected createVisual(context: IRenderContext, edge: IEdge): Visual | null {
    return null // TODO - create the SVG element
  }
}
```

--------------------------------

### Application Initialization and Layout

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/input/touchcustomization/index.html

Initializes the UI components and sets the dimensions for the main interaction panel.

```javascript
import '@yfiles/demo-app/initialize-ui'
```

```css
.main-container .interaction-panel { flex: 0 1 250px; width: 250px; }
```

--------------------------------

### Run Reachability Analysis

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/tutorial-yfiles-basic-features/12-graph-analysis/index.html

Executes a reachability test starting from selected nodes and highlights the reachable nodes in the graph component.

```typescript
// use the selected nodes as start nodes
const startNodes = graphComponent.selection.nodes

const reachability = new Reachability({
  startNodes: startNodes,
  directed: true // consider edge direction
})
const reachabilityResult = reachability.run(graphComponent.graph)

// highlight the reachable nodes
reachabilityResult.reachableNodes.forEach((n: INode): void => {
  graphComponent.highlights.add(n)
})
```

--------------------------------

### UI Initialization and Tooltip Styling

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/application-features/accessibility/index.html

Imports the UI initialization module and applies basic margin styling to tooltip elements.

```javascript
import '@yfiles/demo-app/initialize-ui'
.tooltip * { margin: 5px; }
```

--------------------------------

### Crop Edge Path

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/tutorial-style-implementation-edge/02-crop-the-polyline/index.html

Trim the path to the node outline using the cropPath method, specifying no arrows for the start and end.

```javascript
const croppedGeneralPath = this.cropPath(
  edge,
  IArrow.NONE,
  IArrow.NONE,
  generalPath!
)
```

--------------------------------

### Create Nodes with Tag Data

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/tutorial-style-implementation-node/06-render-text/index.html

Example of creating nodes with custom tag objects containing color and title properties.

```javascript
graph.createNode({
  layout: [0, 0, 100, 70],
  tag: { color: '#b91c3b', title: 'Title' }
})
graph.createNode({
  layout: [140, 0, 100, 70],
  tag: { color: '#9e7cb5', title: 'Long title', showBadge: true }
})
```

--------------------------------

### Initialize UI for Clustering Demo

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/analysis/clustering/index.html

Imports the necessary UI initialization module for the yFiles demo application.

```javascript
import '@yfiles/demo-app/initialize-ui'
```

--------------------------------

### Initialize UI and Label Styles

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/style/markup-labels/index.html

Imports the UI initialization module and defines CSS classes for label styling.

```javascript
import '@yfiles/demo-app/initialize-ui'
```

```css
.yfiles-label-h2 { fill: #404040; font-variant: small-caps; }
```

--------------------------------

### Markdown Syntax Examples

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/style/markdownlabel/index.html

Supported Markdown elements include headings, emphasis, strikethrough, code blocks, and specific newline handling.

```markdown
**Hello World**
```

```markdown
# Headings
```

```markdown
*emphasis* and **strong** text
```

```markdown
~~strikethrough~~ text
```

```markdown
`code`
```

```markdown
```
code blocks
```
```

```markdown
Newlines, with trailing backslash\
```

--------------------------------

### Application Initialization

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/style/arrow/index.html

Imports the UI initialization module and sets specific styles for label editing boxes.

```javascript
import '@yfiles/demo-app/initialize-ui'
.yfiles-labeleditbox { color: black; }
```

--------------------------------

### Subclassing PortStyleBase for Custom Ports

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/tutorial-style-implementation-port/01-render-port-shape/index.html

The starting point for a custom port style implementation by extending PortStyleBase and overriding the createVisual and getBounds methods.

```typescript
export class CustomPortStyle extends PortStyleBase {
  protected createVisual(context: IRenderContext, port: IPort): Visual | null {
    return null // TODO - create the SVG element
  }

  protected getBounds(context: ICanvasContext, port: IPort): Rect {
    return Rect.EMPTY // TODO - calculate the port bounds
  }
}
```

--------------------------------

### Define Hierarchical Node Data

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/tutorial-graph-builder/04-group-nodes/index.html

Example data structure showing how to use a parent property to define group membership and nested hierarchies.

```javascript
const nodeData = [
  { id: 'item0' },
  { id: 'item1', parent: 'group0' },
  { id: 'item2', parent: 'group1' },
  { id: 'group0' },
  { id: 'group1', parent: 'group0' }
]
```

--------------------------------

### Configure and Run Shortest Path Algorithm

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/tutorial-yfiles-basic-features/12-graph-analysis/index.html

Initializes the ShortestPath algorithm with source and sink nodes, custom edge costs, and executes it on the graph.

```typescript
const shortestPath = new ShortestPath({
  source: sourceNode,
  sink: sinkNode,
  directed: false, // don't consider the edge direction
  // calculate the cost per edge as the distance between source and target node
  costs: (edge: IEdge): number =>
    edge.sourceNode.layout.center.subtract(edge.targetNode.layout.center)
      .vectorLength
})
const shortestPathResult = shortestPath.run(graph)
```

--------------------------------

### Instantiate and Configure Custom Node Styles

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/tutorial-style-implementation-node/04-making-the-style-configurable/index.html

Demonstrates creating style instances with specific colors via the constructor or by modifying the property after instantiation.

```typescript
// the color can be specified in the constructor
    const styleWithRedFill = new CustomNodeStyle('#b91c3b')
    
    // the fill color can also be changed later using the property on the style class
    const styleWithPurpleFill = new CustomNodeStyle('grey')
    styleWithPurpleFill.fillColor = '#9e7cb5'
    
    // not specifying the fill color will use the default color
    const styleWithDefaultFill = new CustomNodeStyle()
```

--------------------------------

### JSON Data Structure for Graph Construction

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/application-features/building-graph-from-data/README.md

Example of the JSON structure used to define nodes, edges, and group hierarchies for the graph builder.

```json
{
  "nodesSource" = [
    {"id": "0", "label": "Source"},
    {"id": "1", "group": "group0"},
    ...
  ],
  "edgesSource": [
    {"from": "0", "to": "group0"},
    ...
  ],
  "groupsSource": [
    {
      "id": "group0",
      "label": "Group 1"
    },
    ...
  ]
}
```

--------------------------------

### Create Graph Items with Specific Styles

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/tutorial-yfiles-basic-features/04-setting-styles/index.html

Demonstrates initializing nodes, edges, and labels with custom style configurations during creation.

```javascript
    const node = graph.createNodeAt({
      location: new Point(30, 215),
      style: new ImageNodeStyle('resources/star-16.svg')
    })
    graph.createEdge({
      source: sourceNode,
      target: node,
      style: new PolylineEdgeStyle({
        targetArrow: '#224556 medium triangle',
        stroke: '2px #224556'
      })
    })
    graph.addLabel({
      text: 'New Label',
      owner: node,
      style: new LabelStyle({ backgroundFill: '#a6a6c0' })
    })
```

--------------------------------

### Initialize UI and Splash Screen Styles

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/layout/hierarchical-nesting/index.html

Defines the CSS styles for the splash screen and loading animation, and imports the UI initialization module.

```css
#splash-screen { position: fixed; inset: 0; display: flex; justify-content: center; align-items: center; background: var(--splash-bg-color); color: var(--splash-text-color); z-index: 99999; transition: opacity 0.15s ease-in-out, visibility 0.15s; } :root { /* Brand / glow color for light mode */ --splash-glow-color: oklch(0.55 0.12 215); --splash-glow-color-transparent-90: oklch(0.55 0.12 215 / 0.9); --splash-glow-color-transparent-85: oklch(0.55 0.12 215 / 0.85); --splash-glow-color-transparent-35: oklch(0.55 0.12 215 / 0.35); --splash-glow-color-transparent-0: oklch(0.55 0.12 215 / 0); --splash-bg-color: #ffffff; --splash-text-color: var(--splash-glow-color); } :root[data-theme='dark'] { --splash-bg-color: oklch(0.2775 0.0279 242.63); --splash-text-color: #ffffff; --splash-glow-color: oklch(0.75 0.135 217); --splash-glow-color-transparent-90: oklch(0.75 0.135 217 / 0.9); --splash-glow-color-transparent-85: oklch(0.75 0.135 217 / 0.85); --splash-glow-color-transparent-35: oklch(0.75 0.135 217 / 0.35); --splash-glow-color-transparent-0: oklch(0.75 0.135 217 / 0); } .splash-glow-pulse { position: relative; width: 180px; height: 180px; display: inline-block; isolation: isolate; opacity: 0; animation: splash-content-fade-in 0.4s ease-out 0.3s forwards; } @keyframes splash-content-fade-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .splash-glow-pulse svg { width: 100%; height: 100%; display: block; position: relative; z-index: 1; filter: drop-shadow(0 0 8px var(--splash-glow-color-transparent-85)) drop-shadow(0 0 24px var(--splash-glow-color-transparent-35)); } .splash-glow-pulse::before { content: ''; position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient( circle, var(--splash-bg-color) 0%, var(--splash-bg-color) 42%, var(--splash-glow-color-transparent-90) 58%, var(--splash-glow-color-transparent-0) 78% ); transform: translate(-50%, -50%) scale(1); pointer-events: none; filter: blur(14px); opacity: 0.75; animation: radiate 1.3s ease-out infinite; z-index: 0; } @keyframes radiate { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.75; filter: blur(14px); } 55% { opacity: 0.2; } 100% { transform: translate(-50%, -50%) scale(2.15); opacity: 0; filter: blur(26px); } }
```

```javascript
import '@yfiles/demo-app/initialize-ui'
```

--------------------------------

### Create Group Nodes and Edges

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/tutorial-yfiles-basic-features/08-grouping/index.html

Demonstrates how to create nodes, group them, and establish edges that cross group boundaries.

```javascript
const n1 = graph.createNodeAt([30, -200])
const n2 = graph.createNodeAt([170, -200])
const n3 = graph.createNodeAt([30, -100])
graph.createEdge(n1, n3)
// Create an edge that crosses the group node boundary
graph.createEdge(n3, graph.nodes.first()!)

// Create a group node that encloses n1, n2 and n3
const groupNode = graph.groupNodes([n1, n2, n3])

graph.addLabel(groupNode, 'Group Node')
// Edges starting from the group node itself are also allowed
const edgeFromGroup = graph.createEdge(groupNode, graph.nodes.at(1)!)
```

--------------------------------

### UI Initialization and Styling

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/application-features/grid-snapping/index.html

Imports the UI initialization module and defines styles for the interaction panel and form controls.

```javascript
import '@yfiles/demo-app/initialize-ui'
```

```css
.selected-color { stroke: #6c6c6c; stroke-width: 2px; width: 24px; height: 24px; } #grid-color-picker { height: 30px; } #thickness-label { vertical-align: top; } .main-container .interaction-panel { flex: 0 1 250px; width: 250px; } #grid-snap-type-radio-group input, #grid-style-radio-group input, #gridRenderModeRadioGroup input { margin-right: 12px; }
```

--------------------------------

### Initialize UI and Style Inputs

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/style/webgl-selection-styles/index.html

Imports the UI initialization module and removes borders from color input elements.

```javascript
import '@yfiles/demo-app/initialize-ui'
```

```css
input[type='color'] { border: none; }
```
Tokens:
Raw