Merge branch 'master' of github.com:knsv/mermaid

This commit is contained in:
Knut Sveidqvist 2019-10-10 17:57:39 +02:00
commit ce017ecd40
5 changed files with 14 additions and 9 deletions

View File

@ -9,7 +9,6 @@
- Diagrams - Diagrams
- [Flowchart](flowchart.md) - [Flowchart](flowchart.md)
- [State diagram](stateDiagram.md)
- [Sequence diagram](sequenceDiagram.md) - [Sequence diagram](sequenceDiagram.md)
- [Gantt](gantt.md) - [Gantt](gantt.md)
- [Pie Chart](pie.md) - [Pie Chart](pie.md)

View File

@ -7,8 +7,8 @@
<meta name="description" content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs."> <meta name="description" content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@8.3.1/dist/mermaid.min.js"></script> --> <script src="//cdn.jsdelivr.net/npm/mermaid@8.3.1/dist/mermaid.min.js"></script>
<script src="//localhost:9000/mermaid.js"></script> <!-- <script src="//localhost:9000/mermaid.js"></script> -->
<style> <style>
.markdown-section { .markdown-section {
max-width: 1200px; max-width: 1200px;

View File

@ -74,7 +74,7 @@ export const addMember = function(className, member) {
theClass.annotations.push(memberString.substring(2, memberString.length - 2)); theClass.annotations.push(memberString.substring(2, memberString.length - 2));
} else if (memberString.endsWith(')')) { } else if (memberString.endsWith(')')) {
theClass.methods.push(memberString); theClass.methods.push(memberString);
} else { } else if (memberString) {
theClass.members.push(memberString); theClass.members.push(memberString);
} }
} }

View File

@ -323,6 +323,8 @@ const drawClass = function(elem, classDef) {
isFirst = false; isFirst = false;
}); });
console.warn('classDef.id', classDef.id);
console.warn('isFirst', isFirst);
// add class title // add class title
const classTitle = title const classTitle = title
.append('tspan') .append('tspan')
@ -346,6 +348,7 @@ const drawClass = function(elem, classDef) {
.attr('y', titleHeight + conf.dividerMargin + conf.textHeight) .attr('y', titleHeight + conf.dividerMargin + conf.textHeight)
.attr('fill', 'white') .attr('fill', 'white')
.attr('class', 'classText'); .attr('class', 'classText');
console.warn(classDef.id, titleHeight, conf.dividerMargin, conf.textHeight);
isFirst = true; isFirst = true;
classDef.members.forEach(function(member) { classDef.members.forEach(function(member) {
@ -483,8 +486,8 @@ export const draw = function(text, id) {
}); });
diagram.attr('height', '100%'); diagram.attr('height', '100%');
diagram.attr('width', '100%'); diagram.attr('width', `${g.graph().width * 1.5 + 20}`);
diagram.attr('viewBox', '0 0 ' + (g.graph().width + 20) + ' ' + (g.graph().height + 20)); diagram.attr('viewBox', '-10 -10 ' + (g.graph().width + 20) + ' ' + (g.graph().height + 20));
}; };
export default { export default {

View File

@ -92,12 +92,15 @@ export const draw = function(text, id) {
const bounds = diagram.node().getBBox(); const bounds = diagram.node().getBBox();
// diagram.attr('height', '100%'); diagram.attr('height', '100%');
// diagram.attr('width', 'fit-content'); // diagram.attr('width', 'fit-content');
diagram.attr('style', 'width: fit-content;'); diagram.attr('style', `max-width: ${bounds.width * 1.5 + conf.padding * 2};`);
diagram.attr( diagram.attr(
'viewBox', 'viewBox',
'0 0 ' + (bounds.width + conf.padding * 2) + ' ' + (bounds.height + conf.padding * 2) `${conf.padding * -1} ${conf.padding * -1} ` +
(bounds.width * 1.5 + conf.padding * 2) +
' ' +
(bounds.height * 1.5 + conf.padding * 2)
); );
}; };
const getLabelWidth = text => { const getLabelWidth = text => {