Add classes to ERD elements

It's a little hard to style the current ERDs. This aims to make things
easier by associating a distinct class with each type of element within
the diagram.

I've added a common `er` class across the elements so that those that
bring their own `themeCSS` can target styles at this diagram type. This
hasn't really been done elsewhere so I'm open to suggestions; an
alternative may be to add classes to a top-level element so that we can
do e.g. `svg.mermaid.er .entityBox`.
This commit is contained in:
Ryan Ling
2020-07-11 20:34:57 +10:00
parent c390e9e877
commit 20e56d7dfa
2 changed files with 46 additions and 13 deletions

View File

@@ -43,6 +43,7 @@ const drawEntities = function(svgNode, entities, graph) {
const textId = 'entity-' + id;
const textNode = groupNode
.append('text')
.attr('class', 'er entityLabel')
.attr('id', textId)
.attr('x', 0)
.attr('y', 0)
@@ -65,6 +66,7 @@ const drawEntities = function(svgNode, entities, graph) {
// Draw the rectangle - insert it before the text so that the text is not obscured
const rectNode = groupNode
.insert('rect', '#' + textId)
.attr('class', 'er entityBox')
.attr('fill', conf.fill)
.attr('fill-opacity', '100%')
.attr('stroke', conf.stroke)
@@ -148,6 +150,7 @@ const drawRelationshipFromLayout = function(svg, rel, g, insert) {
// Insert the line at the right place
const svgPath = svg
.insert('path', '#' + insert)
.attr('class', 'er relationshipLine')
.attr('d', lineFunction(edge.points))
.attr('stroke', conf.stroke)
.attr('fill', 'none');
@@ -224,6 +227,7 @@ const drawRelationshipFromLayout = function(svg, rel, g, insert) {
const labelNode = svg
.append('text')
.attr('class', 'er relationshipLabel')
.attr('id', labelId)
.attr('x', labelPoint.x)
.attr('y', labelPoint.y)
@@ -241,6 +245,7 @@ const drawRelationshipFromLayout = function(svg, rel, g, insert) {
// Insert the opaque rectangle before the text label
svg
.insert('rect', '#' + labelId)
.attr('class', 'er relationshipLabelBox')
.attr('x', labelPoint.x - labelBBox.width / 2)
.attr('y', labelPoint.y - labelBBox.height / 2)
.attr('width', labelBBox.width)