/topology

A diagram (topology, UML) framework uses canvas and typescript. 一个用canvas+typescript写的绘图【核心库，不依赖框架】（微服务架构图、拓扑图、流程图、类图等ULM图，动画、视频支持）。 免费使用【在线编辑】：

Primary LanguageTypeScript

喜欢，请到这里给我们投一票：https://www.oschina.net/project/top_cn_2019?utm_source=projectdetail 。（开发工具栏，或下滑网页搜索：Topology）

English | 简体中文

Le5le-topology

Le5le-topology is a diagram visualization framework uses canvas and typescript. Developers are able to build diagram (topology, UML), micro-services architecture, SCADA and so on.

topology

Why le5le-topology

  • Extensible - Developers are able to make own diagrams easily. You just have to focus on your core logic in the framework.
  • Fast rendering
  • Animate
  • TypeScript

Source

- libs
  |- topology  // The topogoly-core lib source.
- src  // The topology.le5le.com source that uses angular.
- bundle
- demo // The demo uses js.

Getting Started

typescrypt/es6

import { Topology } from 'topology-core';

var canvas = new Topology('topo-dom', options);
canvas.open(data);

es5

<script src="/bundle/topology.bundle.js"></script>

var canvas = new Le5leTopology.Topology('topo-canvas', {});
canvas.open(data);

Docs

[Todo]

→ Chinese docs

Development

$ yarn
$ npm start

# build
$ npm run build

http proxy on localhost

# First, set your host: 127.0.0.1 local.dev.le5le.com
$ npm run dev

http proxy on topology.le5le.com

# First, set your host: 127.0.0.1 local.le5le.com
$ npm run prod

Topology-core lib

[libs/topology#] yarn

# build
[libs/topology#] npm run build

Topology-flow-diagram lib

[libs/topology-flow-diagram#] yarn

# build
[libs/topology-flow-diagram#] npm run build

Make your diagrams

→ Reference

Contributors

Contributing

  • PR
  • Docs
  • Translate
  • Share
  • Writing (articles, demos, videos and so on)
  • Social networks

Wechat: alsmile123
Email: alsmile123@qq.com

Core Maintainers

License

MIT © le5le.com