# 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**: 2025-12-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# CodeUML

一个基于代码生成UML图的工具，支持流程图和序列图。
```text
@start flow
  开始
  if 分支一 then
    执行一
  else if 分支二 then 
    执行二
  else
    执行三
  end
  do
    循环执行
  while 循环一
  while 循环二 do
    循环执行
  end
  结束
@end flow
```

## 功能特性

- **流程图支持**：包括 if、else、else if、while、do while 等常见流程控制结构。
- **序列图支持**：支持 solid、dotted、start 等序列节点。
- **Canvas 渲染**：使用 HTML5 Canvas 进行图形渲染。
- **代码解析**：提供代码解析器，将文本描述转换为 UML 图形结构。

## 安装

```bash
git clone https://gitee.com/MyBefore/code-uml.git
cd code-uml
```
使用HBuilder打开项目

## 使用示例

### 创建 UML 实例

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

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

### 渲染 UML 图

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

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

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

## 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. 创建新分支。
3. 提交代码更改。
4. 创建 Pull Request。

## 许可证

MIT License

## 联系方式

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