gojs绘制UML class

最新推荐文章于 2024-03-22 21:27:05 发布
最新推荐文章于 2024-03-22 21:27:05 发布
阅读量635 收藏
点赞数 1
分类专栏： gojs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28529373/article/details/81483242
版权

项目这边的需求是绘制有一定关系的拓扑图，所以这里我决定使用gojs的UML class绘制。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/go.js"></script>
	</head>
	<body onload="init()">
		<div id="sample">
		  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:800px"></div>
		</div>
	</body>
</html>
<script>
	  function init() {
    if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          initialContentAlignment: go.Spot.Center,
          "undoManager.isEnabled": true,
          layout: $(go.TreeLayout,
                    { // this only lays out in trees nodes connected by "generalization" links
                      angle: 90,
                      path: go.TreeLayout.PathSource,  // links go from child to parent
                      setsPortSpot: false,  // keep Spot.AllSides for link connection spot
                      setsChildPortSpot: false,  // keep Spot.AllSides
                      // nodes not connected by "generalization" links are laid out horizontally
                      arrangement: go.TreeLayout.ArrangementHorizontal
                    })
        });

    // show visibility or access as a single character at the beginning of each property or method
    function convertVisibility(v) {
      switch (v) {
        case "public": return "+";
        case "private": return "-";
        case "protected": return "#";
        case "package": return "~";
        default: return v;
      }
    }

    // the item template for properties
    var propertyTemplate =
      $(go.Panel, "Horizontal",
        // property visibility/access
       /* $(go.TextBlock,
          { isMultiline: false, editable: false, width: 12 },
          new go.Binding("text", "visibility", convertVisibility)),*/
        // property name, underlined if scope=="class" to indicate static property
        $(go.TextBlock,
          { isMultiline: false, editable: true },
          new go.Binding("text", "name").makeTwoWay(),
          new go.Binding("isUnderline", "scope", function(s) { return s[0] === 'c' })),
        // property type, if known
        $(go.TextBlock, "",
          new go.Binding("text", "type", function(t) { return (t ? ": " : ""); })),
        $(go.TextBlock,
          { isMultiline: false, editable: true },
          new go.Binding("text", "type").makeTwoWay()),
        // property default value, if any
        $(go.TextBlock,
          { isMultiline: false, editable: false },
          new go.Binding("text", "default", function(s) { return s ? " = " + s : ""; }))
      );

    // the item template for methods
    var methodTemplate =
      $(go.Panel, "Horizontal",
        // method visibility/access
        /*$(go.TextBlock,
          { isMultiline: false, editable: false, width: 12 },
          new go.Binding("text", "visibility", convertVisibility)),*/
        // method name, underlined if scope=="class" to indicate static method
        $(go.TextBlock,
          { isMultiline: false, editable: true },
          new go.Binding("text", "name").makeTwoWay(),
          new go.Binding("isUnderline", "scope", function(s) { return s[0] === 'c' })),
        // method parameters
        $(go.TextBlock, "()",
          // this does not permit adding/editing/removing of parameters via inplace edits
          new go.Binding("text", "parameters", function(parr) {
              var s = "(";
              for (var i = 0; i < parr.length; i++) {
                var param = parr[i];
                if (i > 0) s += ", ";
                s += param.name + ": " + param.type;
              }
              return s + ")";
          })),
        // method return type, if any
        $(go.TextBlock, "",
          new go.Binding("text", "type", function(t) { return (t ? ": " : ""); })),
        $(go.TextBlock,
          { isMultiline: false, editable: true },
          new go.Binding("text", "type").makeTwoWay())
      );

    // this simple template does not have any buttons to permit adding or
    // removing properties or methods, but it could!
    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        {
          locationSpot: go.Spot.Center,
          fromSpot: go.Spot.AllSides,
          toSpot: go.Spot.AllSides
        },
        $(go.Shape, { fill: "#dddddd" }),
        $(go.Panel, "Table",
          { defaultRowSeparatorStroke: "black" },
          // header
          $(go.TextBlock,
            {
              row: 0, columnSpan: 2, margin: 3, alignment: go.Spot.Center,
              font: "bold 12pt sans-serif",
              isMultiline: false, editable: true
            },
            new go.Binding("text", "name").makeTwoWay()),
          // properties
          $(go.TextBlock, "Properties",
            { row: 1, font: "italic 10pt sans-serif" },
            new go.Binding("visible", "visible", function(v) { return !v; }).ofObject("PROPERTIES")),
          $(go.Panel, "Vertical", { name: "PROPERTIES" },
            new go.Binding("itemArray", "properties"),
            {
              row: 1, padding: 5, stretch: go.GraphObject.Fill,
              defaultAlignment: go.Spot.Left, background: "#ffffff",
              itemTemplate: propertyTemplate
            }
          ),
          /*$("PanelExpanderButton", "PROPERTIES",
            { row: 1, column: 1, alignment: go.Spot.TopRight, visible: false },
            new go.Binding("visible", "properties", function(arr) { return arr.length > 0; })),*/
          // methods
          $(go.TextBlock, "Methods",
            { row: 2, font: "italic 10pt sans-serif" },
            new go.Binding("visible", "visible", function(v) { return !v; }).ofObject("METHODS")),
          $(go.Panel, "Vertical", { name: "METHODS" },
            new go.Binding("itemArray", "methods"),
            {
              row: 2, padding: 5, stretch: go.GraphObject.Fill,
              defaultAlignment: go.Spot.Left, background: "#ffffff",
              itemTemplate: methodTemplate
            }
          ),
         /* $("PanelExpanderButton", "METHODS",
            { row: 2, column: 1, alignment: go.Spot.TopRight, visible: false },
            new go.Binding("visible", "methods", function(arr) { return arr.length > 0; }))*/
        )
      );

    function convertIsTreeLink(r) {
      return r === "generalization";
    }

    function convertFromArrow(r) {
      switch (r) {
        case "generalization": return "";
        default: return "";
      }
    }

    function convertToArrow(r) {
      switch (r) {
        case "generalization": return "";
        case "aggregation": return "";
        default: return "";
      }
    }

    myDiagram.linkTemplate =
      $(go.Link,
        { routing: go.Link.Orthogonal },
        new go.Binding("isLayoutPositioned", "relationship", convertIsTreeLink),
        $(go.Shape),
        $(go.Shape, { scale: 1.3, fill: "white" },
          new go.Binding("fromArrow", "relationship", convertFromArrow)),
        $(go.Shape, { scale: 1.3, fill: "white" },
          new go.Binding("toArrow", "relationship", convertToArrow)),
        $(go.Panel, "Auto",
          $(go.Shape,  // the label background, which becomes transparent around the edges
            {
              fill: $(go.Brush, "Radial",
                      { 0: "rgb(240, 240, 240)", 0.3: "rgb(240, 240, 240)", 1: "rgba(240, 240, 240, 0)" }),
              stroke: null
            }),
          $(go.TextBlock, "transition",  // the label text
            {
              textAlign: "center",
              font: "9pt helvetica, arial, sans-serif",
              margin: 4,
              editable: true  // enable in-place editing
            },
            // editing the text automatically updates the model data
            new go.Binding("text").makeTwoWay())
        )
      );

    // setup a few example class nodes and relationships
    var nodedata = [
      {
        key: 1,
        name: "BankAccount",
        properties: [
          { name: "owner", type: "String"},
          { name: "balance", type: "Currency"}
        ],
        methods: [
          { name: "deposit", parameters: [{ name: "amount", type: "Currency" }]},
          { name: "withdraw", parameters: [{ name: "amount", type: "Currency" }]}
        ]
      },
      {
        key: 11,
        name: "Person",
        properties: [
          { name: "name", type: "String"},
          { name: "birth", type: "Date"}
        ],
        methods: [
          { name: "getCurrentAge", type: "int"}
        ]
      },
      {
        key: 12,
        name: "Student",
        properties: [
          { name: "classes", type: "List"}
        ],
        methods: [
          { name: "attend", parameters: [{ name: "class", type: "Course" }]},
          { name: "sleep"}
        ]
      },
      {
        key: 13,
        name: "Professor",
        properties: [
          { name: "classes", type: "List"}
        ],
        methods: [
          { name: "teach", parameters: [{ name: "class", type: "Course" }]}
        ]
      },
      {
        key: 14,
        name: "Course",
        properties: [
          { name: "name", type: "String"},
          { name: "description", type: "String"},
          { name: "professor", type: "Professor"},
          { name: "location", type: "String"},
          { name: "times", type: "List"},
          { name: "prerequisites", type: "List"},
          { name: "students", type: "List"}
        ],
        methods: [
          { name: "teach", parameters: [{ name: "class", type: "Course" }]}
        ]
      }
    ];
    var linkdata = [
      { from: 1, to: 11, relationship: "generalization", text: "啦啦啦啦"},
      { from: 12, to: 11, relationship: "generalization", text: "啦啦啦啦"},
      { from: 13, to: 11, relationship: "generalization", text: "啦啦啦啦" },
      { from: 14, to: 13, relationship: "generalization", text: "啦啦啦啦" }
    ];
    myDiagram.model = $(go.GraphLinksModel,
      {
        copiesArrays: true,
        copiesArrayObjects: true,
        nodeDataArray: nodedata,
        linkDataArray: linkdata
      });
  }
</script>

运行后的效果图如下：

努力学习滴程序媛
关注
专栏目录
python 如何绘制uml图
zhangzhechun的专栏
10-25 710
这段代码创建了一个简单的UML类图，其中包含两个类节点（ClassA和ClassB）和一个关联关系边。您可以根据需要添加更多的节点和边。在Python中，您可以使用第三方库来绘制UML图。一个常用的库是pygraphviz，它提供了创建和绘制图形的功能。执行上述代码后，您将在当前工作目录中找到一个名为uml_class_diagram.png的图像文件，它是绘制好的UML类图。请注意，pygraphviz库的用法和功能比较灵活，您可以进一步探索其文档，了解更多关于绘制UML图的选项和样式设置。
gojs 绘制UML连线图
qq_28529373的博客
05-08 1159
<template> <div :id='boxId' class="er-box" v-loading="loadingChange" element-loading-text="拼命加载中"> <div style="z-index: 1;" v-if="fullShow"> <el-row :gutter="20"> ...
gojs设置
weixin_33750452的博客
06-17 1391
<template> <div class="canvas-view" id="userPortrait"> </div> </template> <script> import '@/common/go/go-debug' export default { name: 'UserPortrait', da...
GoJs绘制E-R图时，把layout设置为ForceDirectedLayout
qq_28529373的博客
11-20 2756
在最近的项目中，由于表的数据太多，绘制出来的E-R图很乱：所有的表会连续排在一起，有关联的两张表中间可能横着很多张没有关联的表，因此有关联的表之间的关系就会看得很不明了。 这里我用这个方法解决这个问题：把layout设置为ForceDirectedLayout（力导向布局）。这样，有关联关系的表展示在一边，没关联关系的表整齐的排在另一边。修改步骤如下： 首先，在定义画布...
交互式转非交互式_使用GoJS构建交互式图
culiu9261的博客
07-19 368
交互式转非交互式GoJS is a JavaScript library for building interactive diagrams. This tutorial covers the essentails of using GoJS by building an org chart diagram from scratch. GoJS是用于构建交互式图JavaScript库。 本教程通...
JS实现网络拓扑图
weixin_30689307的博客
08-26 2325
废话先不多说，先上图；这是一个模拟设备状态的拓扑图；图中节点右上角的圆形图标绿色代表正常，红色代表设备一次；在图片的左上角 是用来获取节点的详细信息的。具体方法在js中有注释， 因为这只是个教程，所以在写代码上不是很规范。所以希望大家多多见谅。而且因为本人对这个插件的研究也有限，有什么不对的也希望多多交流 谢谢！ 接着上代码。这是前端html和js代码；首先介绍下该功能的实现方法。是利用G...
d3-uml:使用d3绘制uml
05-16
d3-uml TODO: [ x ] svg nested 显示不完全 高优先级TODO： [ x ] 获取classBox 高度宽度数值 width 需要字体数量来计算 以及padding计算 height 需要先根据 tspan 字体大小和 padding 计算出 Text Height， 然后...
C# WinForm-UML类图程序，绘制UML程序-2023(绘制uml类图，保存，打开文件等等)
09-12
在本文中，我们将深入探讨如何使用C# WinForm来创建一个UML类图程序，以及如何实现绘制、保存和打开UML类图的功能。UML（统一建模语言）是一种标准化的图形建模语言，用于软件工程和其他领域，用于描述系统的设计和...
使用rose 绘制 uml图的具体教程步骤
12-21
在“Class Diagram”中，教程可能会指导用户如何绘制类图，这是UML中表达系统静态结构最常用的一种图。在类图中，可以通过创建新的类（New->Class Diagram），为类命名，并在类的内部添加属性（Attributes）和操作...
VUE+GOJS，链路拓扑绘制
05-25
基于vue和gojs的设备链路拓扑图绘制，可以动态增减接口，可以以拖拽的形式将设备添加到链路拓扑图中，动态显示数据流，选中设备时可以高亮显示整条链路。
gojs拓扑图
09-05
支持多浏览器的h5拓扑图，可以智能的生成程序流程图，思维导图，类图。 适合在web系统中进行图谱图绘制。 javascript 支持比较全面
GoJS 绘图 (十) ：链接（完结）
weixin_34033624的博客
08-01 305
非定向链接 最简单的链接没有箭头指示方向。该模板只包含一个形状为主要元素，因为这是在节点之间绘制的线条。链接的路线被计算后将得到一个路径的点。 diagram.nodeTemplate = g( go.Node, 'Auto', new go.Binding('location', 'loc', go.Point....
Vue中使用GOJS绘制拓扑图（项目实践）
weixin_62456663的博客
08-31 3119
Vue中使用gojs绘画拓扑图
基于 GoJS 实现的拓扑图技术总结
Chieffo 的博客
03-16 1393
需求 用拓扑图的方式，为用户直观的展示各类资产（数据库设备、安全设备等）本身的运行状态、风险状态，它们之间的连接、数据交互关系，它们的所属组织关系等； 实现效果 在线链接地址：https://codepen.io/Chieffo/pen/oNjPdwz GoJS 入门 推荐 GoJS 入门学习教程： GoJS官方文档（点击访问） 无论学习哪种编程语言、第三方库和框架等，最好最快的学习方式都是通过官方的标准入门教程学习。这里介绍下我学习入门知识时在官网中常用到的几个栏目，以及它们对应的功能。 （一）快速入
基于HTML5的拓扑图编辑器 - Graph.Editor
热门推荐
asd131531的专栏
01-24 1万+
拓扑图编辑器介绍 拓扑图编辑器项目 - Graph.Editor 正式发布到github了，欢迎访问、提取和贡献代码 项目地址：https://github.com/samsha/graph.editor 在线演示：http://demo.qunee.com/editor/ Graph.Editor是一款基于HTML5技术的拓补图编辑器，采用jquery插件的形式，是Qunee图形组件
【ReactJS】使用GoJS实现自己的图表App
最新发布
欧阳天涵的专栏
03-22 1105
GoJS是一个功能丰富的JavaScript库，用于在现代浏览器和平台上实现交互式图表。 GoJS通过可定制的模板和布局使构建复杂节点、链接和组的图表变得简单。 GoJS提供许多高级功能，用于用户交互，如拖放、复制粘贴、事务状态和撤销管理、色板、概览、数据绑定模型、事件处理程序， 以及用于自定义操作的可扩展工具系统。
GoJs连线绘图模板Link使用示例详解
08-09 937
go.link的配置主要是为了丰富图形中节点之间的关系的显示，以及复杂关系中交叉的样式，使图形中节点之间的关系更加明朗。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值