mirror of
				https://github.com/mermaid-js/mermaid.git
				synced 2025-11-03 20:34:20 +01: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