GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

Finalizing GitGraph with directives, theming & docs

Browse Source
This commit is contained in:
ashishj 2022-03-31 19:37:36 +02:00
parent f6421734a2
commit 12c63ff007
8 changed files with 345 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
cypress/platform/gitgraph.html
View File

@ -26,8 +26,9 @@
</head> </head>
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div class="mermaid" style="width: 100%; height: 20%;"> <div class="mermaid2" style="width: 100%; height: 20%;">
gitGraph: %%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
gitGraph
commit "Ashish" commit "Ashish"
branch newbranch branch newbranch
checkout newbranch checkout newbranch
@ -43,33 +44,32 @@
</div> </div>
<div class="mermaid" style="width: 100%; height: 20%;"> <div class="mermaid" style="width: 100%; height: 20%;">
gitGraph: gitGraph
commit commit type:HIGHLIGHT
branch hotfix branch hotfix
checkout hotfix checkout hotfix
commit commit type:HIGHLIGHT
branch develop branch develop
checkout develop checkout develop
commit id:"ash" tag:"abc" commit id:"ash" tag:"abc" type:HIGHLIGHT
branch featureB branch featureB
checkout featureB checkout featureB
commit type:HIGHLIGHT commit type:HIGHLIGHT
checkout main checkout main
checkout hotfix checkout hotfix
commit type:NORMAL commit type:HIGHLIGHT
checkout develop checkout develop
commit type:REVERSE commit type:REVERSE
checkout featureB checkout featureB
commit commit type:HIGHLIGHT
checkout main checkout main
merge hotfix merge hotfix
checkout featureB checkout featureB
commit commit type:HIGHLIGHT
checkout develop checkout develop
branch featureA branch featureA
commit commit type:HIGHLIGHT
checkout develop checkout develop
merge hotfix
checkout featureA checkout featureA
commit commit
checkout featureB checkout featureB
@ -78,7 +78,7 @@
merge featureA merge featureA
branch release branch release
checkout release checkout release
commit commit type:HIGHLIGHT
checkout main checkout main
commit commit
checkout release checkout release
@ -101,18 +101,18 @@
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
}; };
mermaid.initialize({ mermaid.initialize({
theme: 'base', theme: 'dark',
themeVariables: { // themeVariables: {
primaryColor: '#9400D3', // primaryColor: '#9400D3',
darkMode: true, // darkMode: true,
// background: '#222', // background: '#222',
textColor: 'white', // // textColor: 'white',
primaryTextColor: '#f4f4f4', // // primaryTextColor: '#f4f4f4',
// nodeBkg: '#ff0000', // // // nodeBkg: '#ff0000',
// mainBkg: '#0000ff', // // // mainBkg: '#0000ff',
// tertiaryColor: '#ffffcc', // // // tertiaryColor: '#ffffcc',
}, // },
// theme: 'forest', // theme: 'forest',
// theme: 'neutral', // theme: 'neutral',
// theme: 'dark', // theme: 'dark',

263
docs/gitgraph.md
View File

@ -81,8 +81,11 @@ Let us see how these different commit type look with the help of the following d
```mermaid-example ```mermaid-example
gitGraph gitGraph
commit id: "Normal" commit id: "Normal"
commit
commit id: "Reverse" type: REVERSE commit id: "Reverse" type: REVERSE
commit
commit id: "Hightlight" type: HIGHLIGHT commit id: "Hightlight" type: HIGHLIGHT
commit
``` ```
In this example, we have specified different types to each commit. Also, see how we have clubbed both `id` and `type` together at the time of declaring our commits. In this example, we have specified different types to each commit. Also, see how we have clubbed both `id` and `type` together at the time of declaring our commits.
@ -96,12 +99,16 @@ Let us see how this works with the help of the following diagram:
```mermaid-example ```mermaid-example
gitGraph gitGraph
commit
commit id: "Normal" tag: "v1.0.0" commit id: "Normal" tag: "v1.0.0"
commit
commit id: "Reverse" type: REVERSE tag: "RC_1" commit id: "Reverse" type: REVERSE tag: "RC_1"
commit
commit id: "Hightlight" type: HIGHLIGHT tag: "8.8.4" commit id: "Hightlight" type: HIGHLIGHT tag: "8.8.4"
commit
``` ```
In this example, we have given custom tags to the commits. Also, see how we have combined all thress attributes in a single commit declaration. You can mix-match these attributes as you like. In this example, we have given custom tags to the commits. Also, see how we have combined all these attributes in a single commit declaration. You can mix-match these attributes as you like.
### Create a new branch ### Create a new branch
In Mermaid, in-order to create a new branch, you make use of the `branch` keyword. You also need to provide a name of the new branch. The name has to be unique and cannot be that of an existing branch. Usage example: `branch develop` In Mermaid, in-order to create a new branch, you make use of the `branch` keyword. You also need to provide a name of the new branch. The name has to be unique and cannot be that of an existing branch. Usage example: `branch develop`
@ -174,3 +181,257 @@ Then we created the `develop` branch, and all three commits afterwards are put o
After this we made use of the `checkout` keyword to set the current branch as `main`, and all commit that follow are registered against the current branch, i.e. `main`. After this we made use of the `checkout` keyword to set the current branch as `main`, and all commit that follow are registered against the current branch, i.e. `main`.
After this we merge the `develop` branch onto the current branch `main`, resulting in a merge commit. After this we merge the `develop` branch onto the current branch `main`, resulting in a merge commit.
Since the current branch at this point is still `main`, the last two commits are registered against that. Since the current branch at this point is still `main`, the last two commits are registered against that.
## Themes
Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about themeing your diagram [here](./theming.md).
Following are the different pre-defined theme options:
- `base`
- `forest`
- `dark`
- `default`
- `neutral`
**NOTE**: To change theme you can either use the `initialize` call or *directives*. Learn more about [directives](./directives.md)
Let's put them to use, add see how our sample diagram looks like in different themes:
### Base Theme
```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
```
### Forest Theme
```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
```
### Default Theme
```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
gitGraph
commit type:HIGHLIGHT
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
```
### Dark Theme
```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
```
### Neutral Theme
```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
```
## Customize using Theme Variables

8
src/diagrams/git/gitGraphAst.js
View File

@ -1,5 +1,7 @@
import { log } from '../../logger'; import { log } from '../../logger';
import { random } from '../../utils'; import { random } from '../../utils';
import mermaidAPI from '../../mermaidAPI';
import * as configApi from '../../config';
let commits = {}; let commits = {};
let head = null; let head = null;
let branches = { main: head }; let branches = { main: head };
@ -11,6 +13,10 @@ function getId() {
return random({ length: 7 }); return random({ length: 7 });
} }
export const parseDirective = function (statement, context, type) {
mermaidAPI.parseDirective(this, statement, context, type);
};
// /** // /**
// * @param currentCommit // * @param currentCommit
// * @param otherCommit // * @param otherCommit
@ -354,6 +360,8 @@ export const commitType = {
}; };
export default { export default {
parseDirective,
getConfig: () => configApi.getConfig().gitGraph,
setDirection, setDirection,
setOptions, setOptions,
getOptions, getOptions,

8
src/diagrams/git/gitGraphRenderer.js
View File

@ -7,9 +7,11 @@ import gitGraphParser from './parser/gitGraph';
import { log } from '../../logger'; import { log } from '../../logger';
/* eslint-disable */ /* eslint-disable */
import { getConfig } from '../../config'; import { getConfig } from '../../config';
//import * as configApi from '../../config';
let allCommitsDict = {}; let allCommitsDict = {};
let branchNum; let branchNum;
//let conf = configApi.getConfig();
const commitType = db.commitType; const commitType = db.commitType;
let branchPos = {}; let branchPos = {};
@ -416,8 +418,8 @@ const drawBranches = (svg, branches) => {
*/ */
export const draw = function (txt, id, ver) { export const draw = function (txt, id, ver) {
clear(); clear();
const config = getConfig().gitGraph; const conf = getConfig();
const config = conf.gitGraph;
// try { // try {
const parser = gitGraphParser.parser; const parser = gitGraphParser.parser;
parser.yy = db; parser.yy = db;
@ -471,7 +473,7 @@ export const draw = function (txt, id, ver) {
const width = svgBounds.width + padding * 2; const width = svgBounds.width + padding * 2;
const height = svgBounds.height + padding * 2; const height = svgBounds.height + padding * 2;
configureSvgSize(diagram, height, width, config.useMaxWidth); configureSvgSize(diagram, height, width, conf.useMaxWidth);
const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`; const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;
// logger.debug(`viewBox ${vBox}`); // logger.debug(`viewBox ${vBox}`);
diagram.attr('viewBox', vBox); diagram.attr('viewBox', vBox);

50
src/diagrams/git/parser/gitGraph.jison
View File

@ -9,10 +9,19 @@
%x string %x string
%x options %x options
%x open_directive
%x type_directive
%x arg_directive
%x close_directive
%options case-insensitive %options case-insensitive
%%
%%
\%\%\{ { this.begin('open_directive'); return 'open_directive'; }
<open_directive>((?:(?!\}\%\%)[^:.])*) { this.begin('type_directive'); return 'type_directive'; }
<type_directive>":" { this.popState(); this.begin('arg_directive'); return ':'; }
<type_directive,arg_directive>\}\%\% { this.popState(); this.popState(); return 'close_directive'; }
<arg_directive>((?:(?!\}\%\%).|\n)*) return 'arg_directive';
(\r?\n)+ /*{console.log('New line');return 'NL';}*/ return 'NL'; (\r?\n)+ /*{console.log('New line');return 'NL';}*/ return 'NL';
\s+ /* skip all whitespace */ \s+ /* skip all whitespace */
\#[^\n]* /* skip comments */ \#[^\n]* /* skip comments */
@ -24,7 +33,7 @@
"msg:" return 'COMMIT_MSG'; "msg:" return 'COMMIT_MSG';
"NORMAL" return 'NORMAL'; "NORMAL" return 'NORMAL';
"REVERSE" return 'REVERSE'; "REVERSE" return 'REVERSE';
"HIGHLIGHT" return 'HIGHLIGHT'; "HIGHLIGHT" return 'HIGHLIGHT';
"tag:" return 'COMMIT_TAG'; "tag:" return 'COMMIT_TAG';
"branch" return 'BRANCH'; "branch" return 'BRANCH';
"merge" return 'MERGE'; "merge" return 'MERGE';
@ -52,7 +61,9 @@
%% /* language grammar */ %% /* language grammar */
start start
: GG document EOF{ return $3; } : eol start
| directive start
| GG document EOF{ return $3; }
| GG ':' document EOF{ return $3; } | GG ':' document EOF{ return $3; }
| GG DIR ':' document EOF {yy.setDirection($2); return $4;} | GG DIR ':' document EOF {yy.setDirection($2); return $4;}
; ;
@ -72,7 +83,7 @@ body
| body line {$1.push($2); $$=$1;} | body line {$1.push($2); $$=$1;}
; ;
line line
: statement {$$ =$1} : statement eol {$$ =$1}
| NL | NL
; ;
@ -107,7 +118,7 @@ commitStatement
| COMMIT COMMIT_TYPE commitType COMMIT_MSG STR {yy.commit($5,'',$3,'')} | COMMIT COMMIT_TYPE commitType COMMIT_MSG STR {yy.commit($5,'',$3,'')}
| COMMIT COMMIT_ID STR COMMIT_MSG STR {yy.commit($5,$3,yy.commitType.NORMAL,'')} | COMMIT COMMIT_ID STR COMMIT_MSG STR {yy.commit($5,$3,yy.commitType.NORMAL,'')}
| COMMIT COMMIT_MSG STR COMMIT_ID STR {yy.commit($3,$5,yy.commitType.NORMAL,'')} | COMMIT COMMIT_MSG STR COMMIT_ID STR {yy.commit($3,$5,yy.commitType.NORMAL,'')}
| COMMIT COMMIT_MSG STR COMMIT_TYPE commitType COMMIT_TAG STR {yy.commit($3,'',$5,$7)} | COMMIT COMMIT_MSG STR COMMIT_TYPE commitType COMMIT_TAG STR {yy.commit($3,'',$5,$7)}
| COMMIT COMMIT_MSG STR COMMIT_TAG STR COMMIT_TYPE commitType {yy.commit($3,'',$7,$5)} | COMMIT COMMIT_MSG STR COMMIT_TAG STR COMMIT_TYPE commitType {yy.commit($3,'',$7,$5)}
| COMMIT COMMIT_TYPE commitType COMMIT_MSG STR COMMIT_TAG STR {yy.commit($5,'',$3,$7)} | COMMIT COMMIT_TYPE commitType COMMIT_MSG STR COMMIT_TAG STR {yy.commit($5,'',$3,$7)}
@ -177,7 +188,34 @@ commitType
: NORMAL { $$=yy.commitType.NORMAL;} : NORMAL { $$=yy.commitType.NORMAL;}
| REVERSE { $$=yy.commitType.REVERSE;} | REVERSE { $$=yy.commitType.REVERSE;}
| HIGHLIGHT { $$=yy.commitType.HIGHLIGHT;} | HIGHLIGHT { $$=yy.commitType.HIGHLIGHT;}
; ;
directive
: openDirective typeDirective closeDirective
| openDirective typeDirective ':' argDirective closeDirective
;
openDirective
: open_directive { yy.parseDirective('%%{', 'open_directive'); }
;
typeDirective
: type_directive { yy.parseDirective($1, 'type_directive'); }
;
argDirective
: arg_directive { $1 = $1.trim().replace(/'/g, '"'); yy.parseDirective($1, 'arg_directive'); }
;
closeDirective
: close_directive { yy.parseDirective('}%%', 'close_directive', 'gitGraph'); }
;
eol
: NL
| ';'
| EOF
;
// reset_arg // reset_arg
// : 'HEAD' reset_parents{$$ = $1+ ":" + $2 } // : 'HEAD' reset_parents{$$ = $1+ ":" + $2 }
// | ID reset_parents{$$ = $1+ ":" + yy.count; yy.count = 0} // | ID reset_parents{$$ = $1+ ":" + yy.count; yy.count = 0}

2
src/diagrams/git/styles.js
View File

@ -23,7 +23,7 @@ const getStyles = (options) =>
.branch { .branch {
stroke-width: 1; stroke-width: 1;
stroke: black; stroke: ${options.lineColor};
stroke-dasharray: 2; stroke-dasharray: 2;
} }
.commit-label { font-size: 10px; fill: ${options.commitLabelColor};} .commit-label { font-size: 10px; fill: ${options.commitLabelColor};}

2
src/mermaidAPI.js
View File

@ -423,7 +423,7 @@ const render = function (id, _txt, cb, container) {
try { try {
switch (graphType) { switch (graphType) {
case 'git': case 'git':
cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute; // cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
//gitGraphRenderer.setConf(cnf.git); //gitGraphRenderer.setConf(cnf.git);
gitGraphRenderer.draw(txt, id, false); gitGraphRenderer.draw(txt, id, false);
break; break;

2
src/themes/theme-default.js
View File

@ -228,7 +228,7 @@ class Theme {
this.git6 = darken(this.git6, 25); this.git6 = darken(this.git6, 25);
this.git7 = darken(this.git7, 25); this.git7 = darken(this.git7, 25);
} }
this.gitInv0 = invert(this.git0); this.gitInv0 = darken(invert(this.git0), 25);
this.gitInv1 = invert(this.git1); this.gitInv1 = invert(this.git1);
this.gitInv2 = invert(this.git2); this.gitInv2 = invert(this.git2);
this.gitInv3 = invert(this.git3); this.gitInv3 = invert(this.git3);