marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-14 21:09:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

Support Multi-line Actor Descriptions

Browse Source 
- Add support for <br/> delimiter in actor descriptions.
- Add actorFontFamily and actorFontSize options to sequence diagram.
- Change default actor description font from times to sans.

Fix #384 #702 #755
This commit is contained in:
Casey Watson
2018-11-26 11:38:10 -07:00
parent a4992963b3
commit 2fc5745c58
3 changed files with 27 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
dist/index.html vendored
View File

@@ -238,6 +238,9 @@ class A someclass;
<div class="mermaid"> <div class="mermaid">
sequenceDiagram sequenceDiagram
participant Alice
participant Bob
participant John as John<br/>Second Line
Alice ->> Bob: Hello Bob, how are you? Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John? Bob-->>John: How about you John?
Bob--x Alice: I am good thanks! Bob--x Alice: I am good thanks!

2
src/diagrams/sequence/sequenceRenderer.js
View File

@@ -17,6 +17,8 @@ const conf = {
width: 150, width: 150,
// Height of actor boxes // Height of actor boxes
height: 65, height: 65,
actorFontSize: 14,
actorFontFamily: '"Open-Sans", "sans-serif"',
// Margin around loop boxes // Margin around loop boxes
boxMargin: 10, boxMargin: 10,
boxTextMargin: 5, boxTextMargin: 5,

20
src/diagrams/sequence/svgDraw.js
View File

@@ -89,7 +89,7 @@ export const drawActor = function (elem, left, verticalPos, description, conf) {
drawRect(g, rect) drawRect(g, rect)
_drawTextCandidateFunc(conf)(description, g, _drawTextCandidateFunc(conf)(description, g,
rect.x, rect.y, rect.width, rect.height, { 'class': 'actor' }) rect.x, rect.y, rect.width, rect.height, { 'class': 'actor' }, conf)
} }
export const anchorElement = function (elem) { export const anchorElement = function (elem) {
@@ -252,13 +252,20 @@ const _drawTextCandidateFunc = (function () {
_setTextAttrs(text, textAttrs) _setTextAttrs(text, textAttrs)
} }
function byTspan (content, g, x, y, width, height, textAttrs) { function byTspan (content, g, x, y, width, height, textAttrs, conf) {
const { actorFontSize, actorFontFamily } = conf
const lines = content.split(/<br\/?>/ig)
for (let i = 0; i < lines.length; i++) {
const dy = (i * actorFontSize) - (actorFontSize * (lines.length - 1) / 2)
const text = g.append('text') const text = g.append('text')
.attr('x', x + width / 2).attr('y', y) .attr('x', x + width / 2).attr('y', y)
.style('text-anchor', 'middle') .style('text-anchor', 'middle')
.style('font-size', actorFontSize)
.style('font-family', actorFontFamily)
text.append('tspan') text.append('tspan')
.attr('x', x + width / 2).attr('dy', '0') .attr('x', x + width / 2).attr('dy', dy)
.text(content) .text(lines[i])
text.attr('y', y + height / 2.0) text.attr('y', y + height / 2.0)
.attr('dominant-baseline', 'central') .attr('dominant-baseline', 'central')
@@ -266,8 +273,9 @@ const _drawTextCandidateFunc = (function () {
_setTextAttrs(text, textAttrs) _setTextAttrs(text, textAttrs)
} }
}
function byFo (content, g, x, y, width, height, textAttrs) { function byFo (content, g, x, y, width, height, textAttrs, conf) {
const s = g.append('switch') const s = g.append('switch')
const f = s.append('foreignObject') const f = s.append('foreignObject')
.attr('x', x).attr('y', y) .attr('x', x).attr('y', y)
@@ -280,7 +288,7 @@ const _drawTextCandidateFunc = (function () {
.style('text-align', 'center').style('vertical-align', 'middle') .style('text-align', 'center').style('vertical-align', 'middle')
.text(content) .text(content)
byTspan(content, s, x, y, width, height, textAttrs) byTspan(content, s, x, y, width, height, textAttrs, conf)
_setTextAttrs(text, textAttrs) _setTextAttrs(text, textAttrs)
} }