vscode-interactive-graphviz
vscode-interactive-graphviz copied to clipboard
tintinweb
Sensitivity to spaces
Dot format is sensitive to spaces. Quote from https://graphviz.org/doc/info/shapes.html#html
As is obvious from the above description, the interpretation of white space characters is one place where HTML-like labels is very different from standard HTML. In HTML, any sequence of white space characters is collapsed to a single space, If the user does not want this to happen, the input must use non-breaking spaces . This makes sense in HTML, where text layout depends dynamically on the space available. In Graphviz, the layout is statically determined by the input, so it is reasonable to treat ordinary space characters as non-breaking. In addition, ignoring tabs and newlines allows the input text to be formatted for easier reading.
ERD diagram in DOT format
digraph {
ranksep=1.0; rankdir=LR;
node [shape = none, fontname="Roboto Mono"];
"Blog.Comment" [label= <<table align='left' border='1' style='rounded' cellspacing='0' cellpadding='4' cellborder='0'><tr><td port='header@schema_module'><font point-size='18'> Blog.Comment </font></td></tr><tr><td border='1' sides='b' colspan='2'><font point-size='14'><i>comments</i></font></td></tr><tr><td align='left' port='field@id'>:id <i><font color='gray54'>:id </font></i></td></tr><tr><td align='left' port='field@text'>:text <i><font color='gray54'>:string </font></i></td></tr><tr><td align='left' port='field@inserted_at'>:inserted_at <i><font color='gray54'>:naive_datetime </font></i></td></tr><tr><td align='left' port='field@updated_at'>:updated_at <i><font color='gray54'>:naive_datetime </font></i></td></tr><tr><td align='left' port='field@post_id'>:post_id <i><font color='gray54'>:id </font></i></td></tr><tr><td align='left' port='field@user_id'>:user_id <i><font color='gray54'>:id </font></i></td></tr></table>>]
"Blog.Post" [label= <<table align='left' border='1' style='rounded' cellspacing='0' cellpadding='4' cellborder='0'><tr><td port='header@schema_module'><font point-size='18'> Blog.Post </font></td></tr><tr><td border='1' sides='b' colspan='2'><font point-size='14'><i>posts</i></font></td></tr><tr><td align='left' port='field@id'>:id <i><font color='gray54'>:id </font></i></td></tr><tr><td align='left' port='field@title'>:title <i><font color='gray54'>:string </font></i></td></tr><tr><td align='left' port='field@text'>:text <i><font color='gray54'>:string </font></i></td></tr><tr><td align='left' port='field@inserted_at'>:inserted_at <i><font color='gray54'>:naive_datetime </font></i></td></tr><tr><td align='left' port='field@updated_at'>:updated_at <i><font color='gray54'>:naive_datetime </font></i></td></tr><tr><td align='left' port='field@user_id'>:user_id <i><font color='gray54'>:id </font></i></td></tr></table>>]
"Blog.User" [label= <<table align='left' border='1' style='rounded' cellspacing='0' cellpadding='4' cellborder='0'><tr><td port='header@schema_module'><font point-size='18'> Blog.User </font></td></tr><tr><td border='1' sides='b' colspan='2'><font point-size='14'><i>users</i></font></td></tr><tr><td align='left' port='field@id'>:id <i><font color='gray54'>:id </font></i></td></tr><tr><td align='left' port='field@email'>:email <i><font color='gray54'>:string </font></i></td></tr></table>>]
"Blog.Post":"field@id":e -> "Blog.Comment":"field@post_id":w
"Blog.User":"field@id":e -> "Blog.Comment":"field@user_id":w
"Blog.User":"field@id":e -> "Blog.Post":"field@user_id":w
}
This is how it looks if rendered with dot utility:
And this is a screenshot from VS code:
Currently I don't have time to look into this. From what I remember we are not alternating the input in any way. So I can think of two possible sources:
- Something within the underlying d3-graphviz (or we are using some api calls differently
- something with the jQuery rerender due to the pan+zoom+highlight implementation
The above given DOT source renders the spaces with our current release:
@fuelen: Can you please verify or provide another example?