https://github.com/ylzon/fiagram

[WIP] F Word React + TypeScript diagram library that uses SVG and HTML for rendering
https://github.com/ylzon/fiagram

d3 diagram react svg typescript

Last synced: over 1 year ago
JSON representation

[WIP] F Word React + TypeScript diagram library that uses SVG and HTML for rendering

• Host: GitHub
• URL: https://github.com/ylzon/fiagram
• Owner: ylzon
• License: mit
• Created: 2024-05-03T08:10:21.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2024-09-26T06:01:44.000Z (almost 2 years ago)
• Last Synced: 2025-02-06T13:47:36.734Z (over 1 year ago)
• Topics: d3, diagram, react, svg, typescript
• Language: TypeScript
• Homepage: https://ylzon.github.io/fiagram/
• Size: 4.14 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
![fiagram-logo.png](docs/public/fiagram-logo.png)

基于 SVG + D3.js，可快速构建出拓扑图、流程图等可视化图形组件

> WIP 项目，目前仅支持 React

### Installation

```bash

npm install @fiagram/react

```

```bash

pnpm add @fiagram/react

```

### Todo

React 

* [x] 支持 i18n 多语言

* [x] 支持 CSS var

* [ ] 支持黑白主题

* [ ] 预置FlowChart、Topology等常用图形

Vue

* [ ] WIP

### React Usage

```javascript

import { Diagram } from '@fiagram/react';

const NodeShape = ({ x, y, width, height, name }) => {

  return (

    

      

      {name}

    

  );

};

const App = () => {

  return (

    

  );

};

export default App;

```