Preview Updated 2026-05-10

Connection graph

Node-and-edge relationship graph. Nodes without explicit coordinates are evenly placed around a circle.

Basic usage

Data is passed in via props. Pure SVG rendering, no third-party chart library dependency. Colors come from the --viz-1..8 tokens and are colorblind-friendly.

背景

src/App.vue

<script setup lang="ts">
import { CfConnectionGraph } from '@chufix-design/vue';
const nodes = [
  { id: 'web', label: 'Web' },
  { id: 'api', label: 'API' },
  { id: 'auth', label: 'Auth' },
  { id: 'db', label: 'DB' },
  { id: 'cache', label: 'Cache' },
  { id: 'queue', label: 'Queue' },
];
const edges = [
  { source: 'web', target: 'api', weight: 4 },
  { source: 'api', target: 'auth', weight: 2 },
  { source: 'api', target: 'db', weight: 5 },
  { source: 'api', target: 'cache', weight: 3 },
  { source: 'api', target: 'queue', weight: 1.5 },
  { source: 'queue', target: 'db', weight: 1 },
];
</script>
<template>
  <CfConnectionGraph :nodes="nodes" :edges="edges" />
</template>

<script setup>
import { CfConnectionGraph } from '@chufix-design/vue';
const nodes = [
  { id: 'web', label: 'Web' },
  { id: 'api', label: 'API' },
  { id: 'auth', label: 'Auth' },
  { id: 'db', label: 'DB' },
  { id: 'cache', label: 'Cache' },
  { id: 'queue', label: 'Queue' },
];
const edges = [
  { source: 'web', target: 'api', weight: 4 },
  { source: 'api', target: 'auth', weight: 2 },
  { source: 'api', target: 'db', weight: 5 },
  { source: 'api', target: 'cache', weight: 3 },
  { source: 'api', target: 'queue', weight: 1.5 },
  { source: 'queue', target: 'db', weight: 1 },
];
</script>
<template>
  <CfConnectionGraph :nodes="nodes" :edges="edges" />
</template>

import { CfConnectionGraph } from '@chufix-design/react';

export default function Demo() {
  const nodes = [
    { id: 'web', label: 'Web' },
    { id: 'api', label: 'API' },
    { id: 'auth', label: 'Auth' },
    { id: 'db', label: 'DB' },
    { id: 'cache', label: 'Cache' },
    { id: 'queue', label: 'Queue' },
  ];
  const edges = [
    { source: 'web', target: 'api', weight: 4 },
    { source: 'api', target: 'auth', weight: 2 },
    { source: 'api', target: 'db', weight: 5 },
    { source: 'api', target: 'cache', weight: 3 },
    { source: 'api', target: 'queue', weight: 1.5 },
    { source: 'queue', target: 'db', weight: 1 },
  ];
  return (
    <>
      <CfConnectionGraph nodes={nodes} edges={edges} />
    </>
  );
}

import { CfConnectionGraph } from '@chufix-design/react';

export default function Demo() {
  const nodes = [
    { id: 'web', label: 'Web' },
    { id: 'api', label: 'API' },
    { id: 'auth', label: 'Auth' },
    { id: 'db', label: 'DB' },
    { id: 'cache', label: 'Cache' },
    { id: 'queue', label: 'Queue' },
  ];
  const edges = [
    { source: 'web', target: 'api', weight: 4 },
    { source: 'api', target: 'auth', weight: 2 },
    { source: 'api', target: 'db', weight: 5 },
    { source: 'api', target: 'cache', weight: 3 },
    { source: 'api', target: 'queue', weight: 1.5 },
    { source: 'queue', target: 'db', weight: 1 },
  ];
  return (
    <>
      <CfConnectionGraph nodes={nodes} edges={edges} />
    </>
  );
}

Microservice topology

Seven services and seven edges showing a typical gateway dispatch pattern.

背景

src/App.vue

<script setup lang="ts">
import { CfConnectionGraph } from '@chufix-design/vue';
const nodes = [
  { id: 'gateway', label: 'Gateway', size: 12, colorIndex: 0 },
  { id: 'auth', label: 'Auth', size: 8, colorIndex: 1 },
  { id: 'users', label: 'Users', size: 10, colorIndex: 2 },
  { id: 'orders', label: 'Orders', size: 11, colorIndex: 3 },
  { id: 'payments', label: 'Payments', size: 10, colorIndex: 4 },
  { id: 'inventory', label: 'Inventory', size: 9, colorIndex: 5 },
  { id: 'notif', label: 'Notify', size: 7, colorIndex: 6 },
];
const edges = [
  { source: 'gateway', target: 'auth', weight: 4 },
  { source: 'gateway', target: 'users', weight: 5 },
  { source: 'gateway', target: 'orders', weight: 6 },
  { source: 'orders', target: 'payments', weight: 4 },
  { source: 'orders', target: 'inventory', weight: 3 },
  { source: 'payments', target: 'notif', weight: 2 },
  { source: 'orders', target: 'notif', weight: 2 },
];
</script>
<template>
  <CfConnectionGraph :nodes="nodes" :edges="edges" :height="320" />
</template>

<script setup>
import { CfConnectionGraph } from '@chufix-design/vue';
const nodes = [
  { id: 'gateway', label: 'Gateway', size: 12, colorIndex: 0 },
  { id: 'auth', label: 'Auth', size: 8, colorIndex: 1 },
  { id: 'users', label: 'Users', size: 10, colorIndex: 2 },
  { id: 'orders', label: 'Orders', size: 11, colorIndex: 3 },
  { id: 'payments', label: 'Payments', size: 10, colorIndex: 4 },
  { id: 'inventory', label: 'Inventory', size: 9, colorIndex: 5 },
  { id: 'notif', label: 'Notify', size: 7, colorIndex: 6 },
];
const edges = [
  { source: 'gateway', target: 'auth', weight: 4 },
  { source: 'gateway', target: 'users', weight: 5 },
  { source: 'gateway', target: 'orders', weight: 6 },
  { source: 'orders', target: 'payments', weight: 4 },
  { source: 'orders', target: 'inventory', weight: 3 },
  { source: 'payments', target: 'notif', weight: 2 },
  { source: 'orders', target: 'notif', weight: 2 },
];
</script>
<template>
  <CfConnectionGraph :nodes="nodes" :edges="edges" :height="320" />
</template>

import { CfConnectionGraph } from '@chufix-design/react';

export default function Demo() {
  const nodes = [
    { id: 'gateway', label: 'Gateway', size: 12, colorIndex: 0 },
    { id: 'auth', label: 'Auth', size: 8, colorIndex: 1 },
    { id: 'users', label: 'Users', size: 10, colorIndex: 2 },
    { id: 'orders', label: 'Orders', size: 11, colorIndex: 3 },
    { id: 'payments', label: 'Payments', size: 10, colorIndex: 4 },
    { id: 'inventory', label: 'Inventory', size: 9, colorIndex: 5 },
    { id: 'notif', label: 'Notify', size: 7, colorIndex: 6 },
  ];
  const edges = [
    { source: 'gateway', target: 'auth', weight: 4 },
    { source: 'gateway', target: 'users', weight: 5 },
    { source: 'gateway', target: 'orders', weight: 6 },
    { source: 'orders', target: 'payments', weight: 4 },
    { source: 'orders', target: 'inventory', weight: 3 },
    { source: 'payments', target: 'notif', weight: 2 },
    { source: 'orders', target: 'notif', weight: 2 },
  ];
  return (
    <>
      <CfConnectionGraph nodes={nodes} edges={edges} />
    </>
  );
}

import { CfConnectionGraph } from '@chufix-design/react';

export default function Demo() {
  const nodes = [
    { id: 'gateway', label: 'Gateway', size: 12, colorIndex: 0 },
    { id: 'auth', label: 'Auth', size: 8, colorIndex: 1 },
    { id: 'users', label: 'Users', size: 10, colorIndex: 2 },
    { id: 'orders', label: 'Orders', size: 11, colorIndex: 3 },
    { id: 'payments', label: 'Payments', size: 10, colorIndex: 4 },
    { id: 'inventory', label: 'Inventory', size: 9, colorIndex: 5 },
    { id: 'notif', label: 'Notify', size: 7, colorIndex: 6 },
  ];
  const edges = [
    { source: 'gateway', target: 'auth', weight: 4 },
    { source: 'gateway', target: 'users', weight: 5 },
    { source: 'gateway', target: 'orders', weight: 6 },
    { source: 'orders', target: 'payments', weight: 4 },
    { source: 'orders', target: 'inventory', weight: 3 },
    { source: 'payments', target: 'notif', weight: 2 },
    { source: 'orders', target: 'notif', weight: 2 },
  ];
  return (
    <>
      <CfConnectionGraph nodes={nodes} edges={edges} />
    </>
  );
}

API

Prop	Type	Default	Description
`nodes`	`GraphNode[]`	`—`	{ id, label, x?, y?, colorIndex?, size? }[]
`edges`	`GraphEdge[]`	`—`	{ source, target, weight?, colorIndex? }[]
`showLabels`	`boolean`	`true`