# code-uml

**Repository Path**: MyBefore/code-uml

## Basic Information

- **Project Name**: code-uml
- **Description**: 使用代码和文本描述和生成uml图
目前已完成流程图相关功能
当前项目是基于uniapp实现，内部核心的表达式解析以及流出图绘制使用TypeScript和Canvas实现。
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-09-17
- **Last Updated**: 2026-03-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# CodeUML

一个基于代码生成 UML 图的工具，支持流程图、序列图和数学函数绘图。

## 功能特性

- **流程图支持**：包括 if、else、else if、while、do while 等常见流程控制结构
- **序列图支持**：支持 solid（实线）、dotted（虚线）、start（起始）等序列节点类型
- **数学函数绘图**：支持显式函数、隐式函数、参数曲线、曲面以及 3D 图形绘制
- **Canvas 渲染**：使用 HTML5 Canvas 进行图形渲染
- **代码解析**：提供代码解析器，将文本描述转换为 UML 图形结构

## 项目结构

```
code-uml/
├── lib/
│   ├── CodeUml.ts              # 主入口类
│   ├── CodeUmlCanvasRender.ts  # Canvas 渲染器
│   ├── Exp.ts                  # 表达式接口
│   ├── Render.ts               # 渲染器接口
│   ├── Uml.ts                  # UML 接口
│   ├── flow/                   # 流程图相关
│   │   ├── FlowExp.ts          # 流程图表达式
│   │   └── node/               # 流程节点
│   │       ├── IfFlowNode.ts   # 条件分支
│   │       ├── ElseFlowNode.ts # 否则
│   │       ├── ElseIfFlowNode.ts
│   │       ├── WhileFlowNode.ts
│   │       ├── WhileDoFlowNode.ts
│   │       ├── DoWhileFlowNode.ts
│   │       ├── EndFlowNode.ts
│   │       └── NormalFlowNode.ts
│   ├── seq/                    # 序列图相关
│   │   ├── SeqExp.ts           # 序列图表达式
│   │   └── node/               # 序列节点
│   │       ├── SolidSeqNode.ts
│   │       ├── DottedSeqNode.ts
│   │       └── StartSeqNode.ts
│   ├── math/                   # 数学表达式
│   │   └── MathExp.ts          # 数学函数绘图
│   ├── render/                 # 渲染节点
│   │   ├── FlowExpRenderNode.ts
│   │   ├── SeqExpRenderNode.ts
│   │   ├── MathExpRenderNode.ts
│   │   ├── flow/               # 流程图渲染节点
│   │   └── seq/                # 序列图渲染节点
│   └── util/                   # 工具类
│       ├── ExpUtil.ts
│       └── StrUtil.ts
├── pages/                      # 页面组件
│   ├── index/                  # 首页
│   ├── about/                  # 关于
│   ├── help/                   # 帮助
│   └── settings/               # 设置
└── static/                    # 静态资源
```

## 安装

```bash
git clone https://gitee.com/MyBefore/code-uml.git
cd code-uml
```

使用 HBuilderX 打开项目即可运行。

## 使用示例

### 创建 UML 实例

```typescript
import { CodeUml } from './lib/CodeUml';

const uml = new CodeUml();
uml.parse('your code here');
```

### 渲染 UML 图

```typescript
import { CodeUmlCanvasRender } from './lib/CodeUmlCanvasRender';

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const render = new CodeUmlCanvasRender(context);

uml.render(render, true);
```

### 流程图示例

```
@start flow
  开始
  if 分支一 then
    执行一
  else if 分支二 then 
    执行二
  else
    执行三
  end
  do
    循环执行
  while 循环一
  while 循环二 do
    循环执行
  end
  结束
@end flow
```

### 序列图示例

```
@start seq
  A -> B: 消息1
  B --> A: 响应
  A -> A: 自身调用
@end seq
```

### 数学函数示例

```
@start math
  y = sin(x)
  x^2 + y^2 = 1
  z = x^2 + y^2
@end math
```

## API 文档

### CodeUml

| 方法 | 说明 |
|------|------|
| `parse(exp: string): void` | 解析代码字符串 |
| `render(render: Render, flush: boolean): void` | 渲染 UML 图 |
| `format(): string` | 获取格式化后的代码字符串 |

### CodeUmlCanvasRender

| 方法 | 说明 |
|------|------|
| `render(exp: Exp[])` | 渲染表达式数组 |
| `renderWidth(): number` | 获取渲染宽度 |
| `renderHeight(): number` | 获取渲染高度 |
| `flush(): void` | 刷新画布 |

## 贡献指南

欢迎贡献代码和文档。请遵循以下步骤：

1. Fork 仓库
2. 创建新分支 (`git checkout -b feature/xxx`)
3. 提交代码更改
4. 创建 Pull Request

## 许可证

MIT License

## 联系方式

如有任何问题或建议，请联系项目维护者。