mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
Merge branch 'master' of github.com:knsv/mermaid
This commit is contained in:
commit
ce017ecd40
@ -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)
|
||||||
|
@ -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;
|
||||||
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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 {
|
||||||
|
@ -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 => {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user