Skip to content

Instantly share code, notes, and snippets.

@Yubyf
Forked from cdfmlr/draw.io.custom.json
Last active April 10, 2025 09:27
Show Gist options
  • Select an option

  • Save Yubyf/28c81e06426c8facd3d133f9face2e2c to your computer and use it in GitHub Desktop.

Select an option

Save Yubyf/28c81e06426c8facd3d133f9face2e2c to your computer and use it in GitHub Desktop.

Revisions

  1. Yubyf revised this gist Apr 10, 2025. 1 changed file with 312 additions and 49 deletions.
    361 changes: 312 additions & 49 deletions draw.io.custom.json
    Original file line number Diff line number Diff line change
    @@ -1,50 +1,313 @@
    {
    "__README": [
    "Customise default colours, fonts, styles for draw.io.",
    "See https://www.diagrams.net/doc/faq/configure-diagram-editor",
    "See https://drawio-app.com/customise-default-colours-fonts-styles-and-the-draw-io-ui-in-confluence-cloud/"
    ],
    "customColorSchemes": [[
    { "fill": "#ffb3ba", "stroke": "none" },
    { "fill": "#ffdfba", "stroke": "none" },
    { "fill": "#ffffba", "stroke": "none" },
    { "fill": "#baffc9", "stroke": "none" },
    { "fill": "#bae1ff", "stroke": "none" },
    { "fill": "#eecbff", "stroke": "none" },
    { "fill": "#a2798f", "stroke": "none" },
    { "fill": "#8caba8", "stroke": "none" }
    ]],
    "__HELP(presetColors)": "one row: 12 colors; 2 rows prefered.",
    "presetColors": [
    "ffb3ba", "ffdfba", "ffffba", "baffc9", "bae1ff", "eecbff",
    "a2798f", "8caba8", "DAE8FC", "D5E8D4", "FFE6CC", "FFF2CC",
    "F8CECC", "E1D5E7", "fefefe", "eeeeee", "dddddd", "999999",
    "666666", "333333", "000000", "f65353", "7ec636", "007aff"
    ],
    "defaultFonts": ["Fira Code", "Courier New", "Helvetica"],
    "defaultVertexStyle": {
    "__EXAMPLE": "rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=none;shadow=1;fontSize=18;fontFamily=Fira Code;fontColor=default;",
    "rounded": "1",
    "whiteSpace": "wrap",
    "shadow": "1",
    "fontSize": "18",
    "fontFamily": "Fira Code",
    "fontColor": "default",
    "fillColor": "#999999",
    "strokeWidth": "0",
    "strokeColor": "none"
    },
    "defaultEdgeStyle": {
    "__EXAMPLE": "edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;fontSize=18;strokeColor=#999999;dashed=1;strokeWidth=2;fontFamily=Courier New;endArrow=open;endFill=0;",
    "edgeStyle": "orthogonalEdgeStyle",
    "rounded": "1",
    "orthogonalLoop": "1",
    "jettySize": "auto",
    "fontSize": "18",
    "fontFamily":"Fira Code",
    "strokeColor": "#999999",
    "dashed": "1",
    "endArrow": "open",
    "endFill": "0"
    }
    }
    "__README": [
    "Customise default colours, fonts, styles for draw.io.",
    "See https://www.diagrams.net/doc/faq/configure-diagram-editor",
    "See https://drawio-app.com/customise-default-colours-fonts-styles-and-the-draw-io-ui-in-confluence-cloud/"
    ],
    "customColorSchemes": [
    [
    {
    "fill": "#FFEBEE",
    "stroke": "#EF9A9A",
    "font": "#D32F2F",
    "title": "Red 50"
    },
    {
    "fill": "#FFCDD2",
    "stroke": "#E57373",
    "font": "#D32F2F",
    "title": "Red 100"
    },
    {
    "fill": "#FCE4EC",
    "stroke": "#F48FB1",
    "font": "#C2185B",
    "title": "Pink 50"
    },
    {
    "fill": "#F8BBD0",
    "stroke": "#F06292",
    "font": "#C2185B",
    "title": "Pink 100"
    },
    {
    "fill": "#F3E5F5",
    "stroke": "#CE93D8",
    "font": "#7B1FA2",
    "title": "Purple 50"
    },
    {
    "fill": "#E1BEE7",
    "stroke": "#BA68C8",
    "font": "#7B1FA2",
    "title": "Purple 100"
    },
    {
    "fill": "#EDE7F6",
    "stroke": "#B39DDB",
    "font": "#512DA8",
    "title": "Deep Purple 50"
    },
    {
    "fill": "#D1C4E9",
    "stroke": "#9575CD",
    "font": "#512DA8",
    "title": "Deep Purple 100"
    }
    ],
    [
    {
    "fill": "#E8EAF6",
    "stroke": "#9FA8DA",
    "font": "#303F9F",
    "title": "Indigo 50"
    },
    {
    "fill": "#C5CAE9",
    "stroke": "#7986CB",
    "font": "#303F9F",
    "title": "Indigo 100"
    },
    {
    "fill": "#E3F2FD",
    "stroke": "#90CAF9",
    "font": "#1976D2",
    "title": "Blue 50"
    },
    {
    "fill": "#BBDEFB",
    "stroke": "#64B5F6",
    "font": "#1976D2",
    "title": "Blue 100"
    },
    {
    "fill": "#E1F5FE",
    "stroke": "#81D4FA",
    "font": "#0288D1",
    "title": "Light Blue 50"
    },
    {
    "fill": "#B3E5FC",
    "stroke": "#4FC3F7",
    "font": "#0288D1",
    "title": "Light Blue 100"
    },
    {
    "fill": "#E0F7FA",
    "stroke": "#80DEEA",
    "font": "#0097A7",
    "title": "Cyan 50"
    },
    {
    "fill": "#B2EBF2",
    "stroke": "#4DD0E1",
    "font": "#0097A7",
    "title": "Cyan 100"
    }
    ],
    [
    {
    "fill": "#E0F2F1",
    "stroke": "#80CBC4",
    "font": "#00796B",
    "title": "Teal 50"
    },
    {
    "fill": "#B2DFDB",
    "stroke": "#4DB6AC",
    "font": "#00796B",
    "title": "Teal 100"
    },
    {
    "fill": "#E8F5E9",
    "stroke": "#A5D6A7",
    "font": "#388E3C",
    "title": "Green 50"
    },
    {
    "fill": "#C8E6C9",
    "stroke": "#81C784",
    "font": "#388E3C",
    "title": "Green 100"
    },
    {
    "fill": "#F1F8E9",
    "stroke": "#C5E1A5",
    "font": "#689F38",
    "title": "Light Green 50"
    },
    {
    "fill": "#DCEDC8",
    "stroke": "#AED581",
    "font": "#689F38",
    "title": "Light Green 100"
    },
    {
    "fill": "#F9FBE7",
    "stroke": "#F0F4C3",
    "font": "#AFB42B",
    "title": "Lime 50"
    },
    {
    "fill": "#F0F4C3",
    "stroke": "#DCE775",
    "font": "#AFB42B",
    "title": "Lime 100"
    }
    ],
    [
    {
    "fill": "#FFFDE7",
    "stroke": "#FFF59D",
    "font": "#FBC02D",
    "title": "Yellow 50"
    },
    {
    "fill": "#FFF9C4",
    "stroke": "#FFF176",
    "font": "#FBC02D",
    "title": "Yellow 100"
    },
    {
    "fill": "#FFF8E1",
    "stroke": "#FFE082",
    "font": "#FFA000",
    "title": "Amber 50"
    },
    {
    "fill": "#FFECB3",
    "stroke": "#FFD54F",
    "font": "#FFA000",
    "title": "Amber 100"
    },
    {
    "fill": "#FFF3E0",
    "stroke": "#FFCC80",
    "font": "#F57C00",
    "title": "Orange 50"
    },
    {
    "fill": "#FFE0B2",
    "stroke": "#FFB74D",
    "font": "#F57C00",
    "title": "Orange 100"
    },
    {
    "fill": "#FBE9E7",
    "stroke": "#FFAB91",
    "font": "#E64A19",
    "title": "Deep Orange 50"
    },
    {
    "fill": "#FFCCBC",
    "stroke": "#FF8A65",
    "font": "#E64A19",
    "title": "Deep Orange 100"
    }
    ]
    ],
    "__HELP(presetColors)": "one row: 12 colors; 2 rows prefered.",
    "presetColors": [
    "FFEBEE",
    "EF9A9A",
    "FFCDD2",
    "E57373",
    "D32F2F",
    "FCE4EC",
    "F48FB1",
    "F8BBD0",
    "F06292",
    "C2185B",
    "F3E5F5",
    "CE93D8",
    "E1BEE7",
    "BA68C8",
    "7B1FA2",
    "EDE7F6",
    "B39DDB",
    "D1C4E9",
    "9575CD",
    "512DA8",
    "E8EAF6",
    "9FA8DA",
    "C5CAE9",
    "7986CB",
    "303F9F",
    "E3F2FD",
    "90CAF9",
    "BBDEFB",
    "64B5F6",
    "1976D2",
    "E1F5FE",
    "81D4FA",
    "B3E5FC",
    "4FC3F7",
    "0288D1",
    "E0F7FA",
    "80DEEA",
    "B2EBF2",
    "4DD0E1",
    "0097A7",
    "E0F2F1",
    "80CBC4",
    "B2DFDB",
    "4DB6AC",
    "00796B",
    "E8F5E9",
    "A5D6A7",
    "C8E6C9",
    "81C784",
    "388E3C",
    "F1F8E9",
    "C5E1A5",
    "DCEDC8",
    "AED581",
    "689F38",
    "F9FBE7",
    "F0F4C3",
    "F0F4C3",
    "DCE775",
    "AFB42B",
    "FFFDE7",
    "FFF59D",
    "FFF9C4",
    "FFF176",
    "FBC02D",
    "FFF8E1",
    "FFE082",
    "FFECB3",
    "FFD54F",
    "FFA000",
    "FFF3E0",
    "FFCC80",
    "FFE0B2",
    "FFB74D",
    "F57C00",
    "FBE9E7",
    "FFAB91",
    "FFCCBC",
    "FF8A65",
    "E64A19"
    ],
    "defaultVertexStyle": {
    "__EXAMPLE": "rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=none;shadow=1;fontSize=18;fontFamily=Fira Code;fontColor=default;",
    "rounded": "1",
    "whiteSpace": "wrap",
    "shadow": "1",
    "fontSize": "18"
    },
    "defaultEdgeStyle": {
    "__EXAMPLE": "edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;fontSize=18;strokeColor=#999999;dashed=1;strokeWidth=2;fontFamily=Courier New;endArrow=open;endFill=0;",
    "edgeStyle": "orthogonalEdgeStyle",
    "rounded": "1",
    "orthogonalLoop": "1",
    "jettySize": "auto",
    "fontSize": "18",
    "strokeColor": "#999999",
    "strokeWidth": "2",
    "endArrow": "classic",
    "endFill": "1",
    "targetPerimeterSpacing": "6",
    "sourcePerimeterSpacing": "6"
    }
    }
  2. @cdfmlr cdfmlr revised this gist Feb 28, 2023. 1 changed file with 7 additions and 0 deletions.
    7 changes: 7 additions & 0 deletions draw.io.custom.json
    Original file line number Diff line number Diff line change
    @@ -14,6 +14,13 @@
    { "fill": "#a2798f", "stroke": "none" },
    { "fill": "#8caba8", "stroke": "none" }
    ]],
    "__HELP(presetColors)": "one row: 12 colors; 2 rows prefered.",
    "presetColors": [
    "ffb3ba", "ffdfba", "ffffba", "baffc9", "bae1ff", "eecbff",
    "a2798f", "8caba8", "DAE8FC", "D5E8D4", "FFE6CC", "FFF2CC",
    "F8CECC", "E1D5E7", "fefefe", "eeeeee", "dddddd", "999999",
    "666666", "333333", "000000", "f65353", "7ec636", "007aff"
    ],
    "defaultFonts": ["Fira Code", "Courier New", "Helvetica"],
    "defaultVertexStyle": {
    "__EXAMPLE": "rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=none;shadow=1;fontSize=18;fontFamily=Fira Code;fontColor=default;",
  3. @cdfmlr cdfmlr created this gist Feb 28, 2023.
    43 changes: 43 additions & 0 deletions draw.io.custom.json
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,43 @@
    {
    "__README": [
    "Customise default colours, fonts, styles for draw.io.",
    "See https://www.diagrams.net/doc/faq/configure-diagram-editor",
    "See https://drawio-app.com/customise-default-colours-fonts-styles-and-the-draw-io-ui-in-confluence-cloud/"
    ],
    "customColorSchemes": [[
    { "fill": "#ffb3ba", "stroke": "none" },
    { "fill": "#ffdfba", "stroke": "none" },
    { "fill": "#ffffba", "stroke": "none" },
    { "fill": "#baffc9", "stroke": "none" },
    { "fill": "#bae1ff", "stroke": "none" },
    { "fill": "#eecbff", "stroke": "none" },
    { "fill": "#a2798f", "stroke": "none" },
    { "fill": "#8caba8", "stroke": "none" }
    ]],
    "defaultFonts": ["Fira Code", "Courier New", "Helvetica"],
    "defaultVertexStyle": {
    "__EXAMPLE": "rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=none;shadow=1;fontSize=18;fontFamily=Fira Code;fontColor=default;",
    "rounded": "1",
    "whiteSpace": "wrap",
    "shadow": "1",
    "fontSize": "18",
    "fontFamily": "Fira Code",
    "fontColor": "default",
    "fillColor": "#999999",
    "strokeWidth": "0",
    "strokeColor": "none"
    },
    "defaultEdgeStyle": {
    "__EXAMPLE": "edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;fontSize=18;strokeColor=#999999;dashed=1;strokeWidth=2;fontFamily=Courier New;endArrow=open;endFill=0;",
    "edgeStyle": "orthogonalEdgeStyle",
    "rounded": "1",
    "orthogonalLoop": "1",
    "jettySize": "auto",
    "fontSize": "18",
    "fontFamily":"Fira Code",
    "strokeColor": "#999999",
    "dashed": "1",
    "endArrow": "open",
    "endFill": "0"
    }
    }