mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-19 07:19:41 +02:00
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:
@@ -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)
|
||||
|
Reference in New Issue
Block a user