# syncfusion-react-diagram

This skill helps build interactive React diagrams with Syncfusion Diagrams. Use it for flowcharts, BPMN, UML models, org charts, and related visual layouts.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 719 installs · ★ 3
- Author: Syncfusion Inc
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-diagram/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/syncfusion-react-diagram

## What it does

The skill covers React setup for Syncfusion Diagrams and the main pieces of a diagram: nodes, connectors, labels, ports, and data binding. It can guide work on flowcharts, organization charts, BPMN process views, UML models, mind maps, and network diagrams. Rendering uses SVG.

Its reference structure covers automatic layouts, swimlanes, groups, symbol palettes, interaction events, state serialization, and export. Optional features are added through the `Inject` module pattern, while the `references/*.md` files provide API-specific guidance.

Check class names, properties, and signatures in `references/*.md` before producing code examples. That requirement matters when an API example depends on an exact Syncfusion definition.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-diagram -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/syncfusion-react-diagram/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/syncfusion-react-diagram/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-diagram -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/syncfusion-react-diagram/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-diagram -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/syncfusion-react-diagram/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install syncfusion/react-ui-components-skills syncfusion-react-diagram
```

2. **Manually: put the files in place**
- File: `.github/skills/syncfusion-react-diagram/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-diagram -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-diagram
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/syncfusion-react-diagram/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-diagram -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-diagram/SKILL.md

## When to use it
- build a process flowchart
- connect diagram nodes with routed lines
- model a BPMN or UML structure
- generate an org chart from data
- add a draggable symbol palette

## Example prompts
- Build a React flowchart with Syncfusion Diagrams, using nodes and connectors for each process step.
- Create an organization chart from hierarchical data and apply an automatic layout.
- Set up a BPMN diagram with swimlanes, labels, and a symbol palette.

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [syncfusion/react-ui-components-skills](https://affpapa.org/en/nevibecode/by/syncfusion/react-ui-components-skills.md) — 57 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md