Sorry, your browser cannot access this site
This page requires browser support (enable) JavaScript
Learn more >

schema:反映顶点label之间的关系,以及Label会有哪些常量类型
用G6

<id> <label> <vertex label>.
<id> <edge label> <id>.
<id> <vertex property> literal.

不可以拖拽
http://graphviz.herokuapp.com/?token=eeb362635d6b026b24d7b012b3ba6ee7
想尝试
https://github.com/magjac/graphviz-visual-editor

加箭头https://g6.antv.vision/zh/docs/manual/middle/elements/edges/arrow
可以拖拽https://g6.antv.vision/zh/examples/net/forceDirected#basicForceDirected

graphviz

digraph ClassDiagram { 
#//////////////////////////////// Introduction \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
/*
    This graph is meant as a starting point to help you create UML Class 
    Diagrams by providing a preset for edges and nodes. 
    
    To use it, you need to take the folowing steps:

     - Copy and paste (or "save as") this graph into a new file
     - Rename the relevant labels (anything with the word "Example" in it).
     - Add nodes (inside subgraphs when needed)
     - Add connections for the nodes
    
    Make sure you place your connections under the right headers, otherwise the
    decoration won't match the UML specifications.

    For each module you should use a separate subgraph. Make sure the name of 
    your subgraph starts with `cluster_`
    
    If you don't like the colors, the easiest way to ammend this is by changing
    the defined colorscheme (currently "pastel13") in the "General Styles" 
    section to any other 3-scheme. All available colorschemes can be found at 
    http://www.graphviz.org/doc/info/colors.html#brewer
*/
#/////////////////////////////// General Styles \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
    graph [
        label = "Example \n Class Diagram"
        labelloc = t

        //dpi = 200
        ranksep=0.65
        nodesep=0.40
        rankdir=BT
        bgcolor="#FFFFDD"
        
        style="dotted, filled"
        fillcolor="#FFFFFF"
    ]

    edge [arrowhead=empty] //空心箭头 =none则无箭头

    node [
        labeljust="l"
        colorscheme="pastel13"
        style=filled
        fillcolor=3
        shape=record
    ]

#/////////////////////////////////// subgraph \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
//可以添加很多子图
subgraph schema { 
//label = "Example \n subgraph Diagram" //子图标题

//nodes
alarm [label="{alarm|arriveTime}"]
lip [label="{lip|slotnum}"]
}
{ //edges
lip -> alarm [label="like"]
lip -> alarm [label="happen"]
}

}//ClassDiagram

评论