mermaid/src/config.js

Markdownish syntax for generating flowcharts, sequence diagrams and gantt charts.

/**
 * ## Configurations for diagram generation
 * These are the default options which can be overridden with the initialization call as in the example below:
 * ```
 * mermaid.initialize({
 *   flowchart:{
 *      htmlLabels: false
 *   }
 * });
 * ```
 */
var config = {
    // **cloneCssStyles** - This options controls whether or not the css rules should be copied into the generated svg
    cloneCssStyles: true,

    // ## flowchart
    // *The object containing configurations specific for flowcharts*
    flowchart:{
        // **htmlLabels** - Flag for setting whether or not a html tag should be used for rendering labels
        // on the edges
        htmlLabels:true,
        // **useMaxWidth** - Flag for setting whether or not a all available width should be used for
        // the diagram.
        useMaxWidth:true
    },

    // ## sequenceDiagram
    // *The object containing configurations specific for sequence diagrams*
    sequenceDiagram:{

        // **diagramMarginX** - margin to the right and left of the sequence diagram
        diagramMarginX:50,

        // **diagramMarginY** - margin to the over and under the sequence diagram
        diagramMarginY:10,

        // **actorMargin** - Margin between actors
        actorMargin:50,

        // **width** - Width of actor moxes
        width:150,

        // **height** - Height of actor boxes
        height:65,

        // **boxMargin** - Margin around loop boxes
        boxMargin:10,

        // **boxTextMargin** - margin around the text in loop/alt/opt boxes
        boxTextMargin:5,

        // **noteMargin** - margin around notes
        noteMargin:10,

        // **messageMargin** - Space between messages
        messageMargin:35,

        // **mirrorActors** - mirror actors under diagram
        mirrorActors:true,

        // **bottomMarginAdj** - Depending on css styling this might need adjustment
        // Prolongs the edge of the diagram downwards
        bottomMarginAdj:1,

        // **useMaxWidth** - when this flag is set the height and width is set to 100% and is then scaling with the
        // available space if not the absolute space required is used
        useMaxWidth:true
    },

    // ## gantt
    // *The object containing configurations specific for gantt diagrams*
    gantt:{
        // **titleTopMargin** - margin top for the text over the gantt diagram
        titleTopMargin: 25,

        // **barHeight** - the height of the bars in the graph
        barHeight: 20,

        // **barGap** - the margin between the different activities in the gantt diagram
        barGap: 4,

        // **topPadding** - margin between title and gantt diagram and between axis and gantt diagram.
        topPadding: 50,

        // **sidePadding** - the space allocated for the section name to the left of the activities.
        sidePadding: 75,

        // **gridLineStartPadding** - Vertical starting position of the grid lines
        gridLineStartPadding: 35,

        // **fontSize** - font size ...
        fontSize: 11,

        // **fontFamily** - font family ...
        fontFamily: '"Open-Sans", "sans-serif"',

        // **numberSectionStyles** - the number of alternating section styles
        numberSectionStyles:3,

        // **axisFormatter** - formatting of the axis, this might need adjustment to match your locale and preferences
        axisFormatter: [
            /*! Within a day*/
            ["%I:%M", function (d) {
                return d.getHours();
            }],
            /*! Monday a week*/
            ["w. %U", function (d) {
                return d.getDay() == 1;
            }],
            /*! Day within a week (not monday) */
            ["%a %d", function (d) {
                return d.getDay() && d.getDate() != 1;
            }],
            /*! within a month */
            ["%b %d", function (d) {
                return d.getDate() != 1;
            }],
            /*! Month */
            ["%m-%y", function (d) {
                return d.getMonth();
            }]
        ]
    }
};