.NET手撸绘制TypeScript类图——上篇

近年来随着交互界面的精细化，TypeScript越来越流行，前端的设计也越来复杂，而类图正是用简单的箭头和方块，反映对象与对象之间关系/依赖的好方式。许多工具都能生成C#类图，有些工具也能生成TypeScript类图，如tsuml，但存在一些局限性。

我们都是.NET开发，为啥不干脆就用.NET撸一个TypeScript类图呢？

说干就干！为了搞到类图，一共分两步走：

  1. 解析.ts文件，生成抽象语法树(AST)，并转换为简单的类、属性、方法等对象
  2. 将这个对象绘制出来

本文将分上下两部分，上篇将介绍我移植的一个.NET Standard 2.0的TypeScript解析库，下篇将介绍如何将AST转换为真正的图，并实现一些基本的交互。

.ts文件生成抽象语法树

正常来说编译原理挺难的，但好在有人赶在了我的前头

.NET手撸绘制TypeScript类图——上篇的更多相关文章

  1. .NET手撸绘制TypeScript类图——下篇

    .NET手撸绘制TypeScript类图--下篇 在上篇的文章中,我们介绍了如何使用.NET解析TypeScript,这篇将介绍如何使用代码将类图渲染出来. 注:以防有人错过了,上篇链接如下:http ...

  2. 使用工厂方法模式设计能够实现包含加法（+）、减法（-）、乘法（*）、除法（/）四种运算的计算机程序，要求输入两个数和运算符，得到运算结果。要求使用相关的工具绘制UML类图并严格按照类图的设计编写程序实

    2.使用工厂方法模式设计能够实现包含加法(+).减法(-).乘法(*).除法(/)四种运算的计算机程序,要求输入两个数和运算符,得到运算结果.要求使用相关的工具绘制UML类图并严格按照类图的设计编写程 ...

  3. 1、使用简单工厂模式设计能够实现包含加法（+）、减法（-）、乘法（*）、除法（/）四种运算的计算机程序，要求输入两个数和运算符，得到运算结果。要求使用相关的工具绘制UML类图并严格按照类图的设计编写程

    1.使用简单工厂模式设计能够实现包含加法(+).减法(-).乘法(*).除法(/)四种运算的计算机程序,要求输入两个数和运算符,得到运算结果.要求使用相关的工具绘制UML类图并严格按照类图的设计编写程 ...

  4. CentO7-使用plantuml绘制UML类图

    准备工作 到PlantUml官网(http://plantuml.com/download)下载plantuml.jar.官网上还有一个在线的demof服务.plantuml的官网真的很挫! 到官网下 ...

  5. Android Studio中绘制simpleUML类图详细说明及使用

    一.Android Studio中安装simpleUML 1.下载simpleUML jar包 地址为:http://plugins.jetbrains.com/  搜索 simpleUMLCE 2. ...

  6. 转：深入浅出UML类图（具体到代码层次）

    深入浅出UML类图 作者:刘伟 ,发布于:2012-11-23,来源:CSDN   在UML 2.0的13种图形中,类图是使用频率最高的UML图之一.Martin Fowler在其著作<UML ...

  7. 深入浅出UML类图（一）

    在UML 2.0的13种图形中,类图是使用频率最高的UML图之一.Martin Fowler在其著作<UML Distilled: A Brief Guide to the Standard O ...

  8. 深入浅出UML类图

    原作者:http://www.uml.org.cn/oobject/201211231.asp 在UML 2.0的13种图形中,类图是使用频率最高的UML图之一.Martin Fowler在其著作&l ...

  9. UML的类图关系分为： 关联、聚合/组合、依赖、泛化（继承）

    UML的类图关系分为: 关联.聚合/组合.依赖.泛化(继承).而其中关联又分为双向关联.单向关联.自身关联:下面就让我们一起来看看这些关系究竟是什么,以及它们的区别在哪里. 1.关联 双向关联:C1- ...

随机推荐

  1. idea2019版与maven3.6.2版本不兼容引发的血案

    昨天遇到了点问题解决浪费了一些时间(导致更新内容较少)回顾下问题 项目出现Unable to import maven project: See logs for details 翻了好多博客 莫名的 ...

  2. Java之微信公众号开发

    这次以文本回复作为案例来讲解Java相关得微信公众号开发. 首先必须要有一个个人微信公众号 个人微信公众号相关的接口权限有限,不过用于个人学习体验一下足够了,如图: 然后进入微信公众后台,点击基本配置 ...

  3. ‎Cocos2d-x 学习笔记(20) ControlButton

    [Cocos2d-x 学习笔记 目录链接] 1. 简介 ControlButton实现了按钮功能,根据触摸的位置和移动的过程可识别9中EventType类型,执行对应的回调函数. 直接继承了Contr ...

  4. composer依赖管理与laravel框架安装

    步骤有点多,生怕哪一天忘记,记录下来会好点 laravel安装有两种途径:1.直接在一些国内第三方网站,如:https://www.golaravel.com/download/ 下载压缩包来解压即可 ...

  5. 【Dubbo】Zookeeper+Dubbo项目demo搭建

    一.Dubbo的注解配置 在Dubbo 2.6.3及以上版本提供支持. 1.@Service(全路径@org.apache.dubbo.config.annotation.Service) 配置服务提 ...

  6. 三维动画形变算法（Mixed Finite Elements）

    混合有限元方法通入引入辅助变量后可以将高阶微分问题变成一系列低阶微分问题的组合.在三维网格形变问题中,我们考虑如下泛函极值问题: 其中u: Ω0 → R3是变形体的空间坐标,上述泛函极值问题对应的欧拉 ...

  7. SpringBoot中如何优雅的读取yml配置文件？

    YAML是一种简洁的非标记语言,以数据为中心,使用空白.缩进.分行组织数据,从而使得表示更加简洁易读.本文介绍下YAML的语法和SpringBoot读取该类型配置文件的过程. 本文目录 一.YAML基 ...

  8. QLable 显示图片

    1,各种对就是不显示,因为路径中有其它符号如\n\r什么的 QStringList FileOpeartion::PathCombine (const QString strPath, QString ...

  9. config.xml

    ASP.NET应用程序的配置信息都存放于Web.config配置文件中,Web.config配置文件是基于XML格式的文件类型,由于XML文件的可伸缩性,使得ASP.NET应用配置变得灵活.高效.容易 ...

  10. T​h​e​ ​v​a​l​u​e​ ​f​o​r​ ​t​h​e​ ​u​s​e​B​e​a​n​ ​c​l​a​s​s​ ​a​t​t​r​i​b​u​t​e​ ​i​s​ ​invalied

    JSP: T​h​e​ ​v​a​l​u​e​ ​f​o​r​ ​t​h​e​ ​u​s​e​B​e​a​n​ ​c​l​a​s​s​ ​a​t​t​r​i​b​u​t​e​ ​X​X​X​ ​i​s ...