collab/mermaid/demos/er-multiline.htmlblame
View source
6dd74de1<html>
6dd74de2 <head>
6dd74de3 <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
6dd74de4 <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
6dd74de5 <link
6dd74de6 rel="stylesheet"
6dd74de7 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
6dd74de8 />
6dd74de9 <link
6dd74de10 href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
6dd74de11 rel="stylesheet"
6dd74de12 />
6dd74de13 <link
6dd74de14 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
6dd74de15 rel="stylesheet"
6dd74de16 />
6dd74de17 <link
6dd74de18 href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
6dd74de19 rel="stylesheet"
6dd74de20 />
6dd74de21 <link rel="preconnect" href="https://fonts.googleapis.com" />
6dd74de22 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
6dd74de23 <link
6dd74de24 href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
6dd74de25 rel="stylesheet"
6dd74de26 />
6dd74de27 <link
6dd74de28 href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
6dd74de29 rel="stylesheet"
6dd74de30 />
6dd74de31 <link
6dd74de32 href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
6dd74de33 rel="stylesheet"
6dd74de34 />
6dd74de35 <link
6dd74de36 href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap"
6dd74de37 rel="stylesheet"
6dd74de38 />
6dd74de39
6dd74de40 <style>
6dd74de41 .recursive-500 {
6dd74de42 font-family: 'Recursive', serif;
6dd74de43 font-optical-sizing: auto;
6dd74de44 font-weight: 500;
6dd74de45 font-style: normal;
6dd74de46 font-variation-settings:
6dd74de47 'slnt' 0,
6dd74de48 'CASL' 0,
6dd74de49 'CRSV' 0.5,
6dd74de50 'MONO' 0;
6dd74de51 }
6dd74de52 body {
6dd74de53 /* background: rgb(221, 208, 208); */
6dd74de54 /* background: #333; */
6dd74de55 /* font-family: 'Arial'; */
6dd74de56 font-family: 'Recursive', serif;
6dd74de57 font-optical-sizing: auto;
6dd74de58 font-weight: 500;
6dd74de59 font-style: normal;
6dd74de60 font-variation-settings:
6dd74de61 'slnt' 0,
6dd74de62 'CASL' 0,
6dd74de63 'CRSV' 0.5,
6dd74de64 'MONO' 0;
6dd74de65 /* color: white; */
6dd74de66 /* font-size: 18px !important; */
6dd74de67 }
6dd74de68 .gridify.tiny {
6dd74de69 background-image:
6dd74de70 linear-gradient(transparent 11px, rgba(220, 220, 200, 0.8) 12px, transparent 12px),
6dd74de71 linear-gradient(90deg, transparent 11px, rgba(220, 220, 200, 0.8) 12px, transparent 12px);
6dd74de72 background-size:
6dd74de73 100% 12px,
6dd74de74 12px 100%;
6dd74de75 }
6dd74de76
6dd74de77 .gridify.dots {
6dd74de78 background-image: radial-gradient(
6dd74de79 circle at center,
6dd74de80 rgba(220, 220, 200, 0.8) 1px,
6dd74de81 transparent 1px
6dd74de82 );
6dd74de83 background-size: 24px 24px;
6dd74de84 }
6dd74de85
6dd74de86 h1 {
6dd74de87 color: grey;
6dd74de88 }
6dd74de89
6dd74de90 .mermaid2 {
6dd74de91 display: none;
6dd74de92 }
6dd74de93
6dd74de94 .mermaid svg {
6dd74de95 font-size: 16px !important;
6dd74de96 font-family: 'Recursive', serif;
6dd74de97 font-optical-sizing: auto;
6dd74de98 font-weight: 500;
6dd74de99 font-style: normal;
6dd74de100 font-variation-settings:
6dd74de101 'slnt' 0,
6dd74de102 'CASL' 0,
6dd74de103 'CRSV' 0.5,
6dd74de104 'MONO' 0;
6dd74de105 }
6dd74de106
6dd74de107 pre {
6dd74de108 width: 100%;
6dd74de109 /*box-shadow: 4px 4px 0px 0px #0000000F;*/
6dd74de110 }
6dd74de111 </style>
6dd74de112 </head>
6dd74de113
6dd74de114 <body class="gridify dots">
6dd74de115 <div class="w-full h-64">
6dd74de116 <pre id="diagram4" class="mermaid" style="background: rgb(255, 255, 255)">
6dd74de117 erDiagram
6dd74de118 CAR ||--o{ NAMED-DRIVER : allows
6dd74de119 CAR ::: Pine {
6dd74de120 string registrationNumber PK "Primary Key<br><strong>Unique registration number</strong>"
6dd74de121 string make "Car make<br><strong>e.g., Toyota</strong>"
6dd74de122 string model "Model of the car<br><strong>e.g., Corolla</strong>"
6dd74de123 string[] parts "List of parts<br><strong>Stored as array</strong>"
6dd74de124 }
6dd74de125 PERSON ||--o{ NAMED-DRIVER : is
6dd74de126 PERSON ::: someclass {
6dd74de127 string driversLicense PK "The license #<br><strong>Primary Key</strong>"
6dd74de128 string(99) firstName "Only 99 characters <br>are allowed <br> <strong>e.g., Smith</strong>"
6dd74de129 string lastName "Last name of person<br><strong>e.g., Smith</strong>"
6dd74de130 string phone UK "Unique phone number<br><strong>Used for contact</strong>"
6dd74de131 int age "Age of the person<br><strong>Must be numeric</strong>"
6dd74de132 }
6dd74de133 NAMED-DRIVER {
6dd74de134 string carRegistrationNumber PK, FK, UK, PK "Foreign key to CAR<br><strong>Also part of PK</strong>"
6dd74de135 string driverLicence PK, FK "Foreign key to PERSON<br><strong>Also part of PK</strong>"
6dd74de136 }
6dd74de137 MANUFACTURER only one to zero or more CAR : makesx
6dd74de138 </pre>
6dd74de139 <hr />
6dd74de140 <pre class="mermaid">
6dd74de141 erDiagram
6dd74de142 _**testẽζ➕Ø😀㌕ぼ**_ {
6dd74de143 *__List~List~int~~sdfds__* **driversLicense** PK "***The l😀icense #***"
6dd74de144 string last*Name*
6dd74de145 string __phone__ UK
6dd74de146 *string(99)~T~~~~~~* firstName "Only __99__ <br>characters are a<br>llowed dsfsdfsdfsdfs"
6dd74de147 int _age_
6dd74de148 }
6dd74de149 </pre>
6dd74de150 </div>
6dd74de151
6dd74de152 <script type="module">
6dd74de153 import mermaid from './mermaid.esm.mjs';
6dd74de154 import layouts from './mermaid-layout-elk.esm.mjs';
6dd74de155
6dd74de156 const staticBellIconPack = {
6dd74de157 prefix: 'fa6-regular',
6dd74de158 icons: {
6dd74de159 bell: {
6dd74de160 body: '<path fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32v19.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416h400c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6c-28.3-35.5-43.8-79.6-43.8-125V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32m0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3c25.8-40 39.7-86.7 39.7-134.6V208c0-61.9 50.1-112 112-112m64 352H160c0 17 6.7 33.3 18.7 45.3S207 512 224 512s33.3-6.7 45.3-18.7S288 465 288 448"/>',
6dd74de161 width: 448,
6dd74de162 },
6dd74de163 },
6dd74de164 width: 512,
6dd74de165 height: 512,
6dd74de166 };
6dd74de167
6dd74de168 mermaid.registerIconPacks([
6dd74de169 {
6dd74de170 name: 'logos',
6dd74de171 loader: () =>
6dd74de172 fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
6dd74de173 },
6dd74de174 {
6dd74de175 name: 'fa',
6dd74de176 loader: () => staticBellIconPack,
6dd74de177 },
6dd74de178 ]);
6dd74de179 mermaid.registerLayoutLoaders(layouts);
6dd74de180 mermaid.parseError = function (err, hash) {
6dd74de181 console.error('Mermaid error: ', err);
6dd74de182 };
6dd74de183 window.callback = function () {
6dd74de184 alert('A callback was triggered');
6dd74de185 };
6dd74de186 function callback() {
6dd74de187 alert('It worked');
6dd74de188 }
6dd74de189 await mermaid.initialize({
6dd74de190 startOnLoad: false,
6dd74de191
6dd74de192 theme: 'forest',
6dd74de193 look: 'classic',
6dd74de194 layout: 'dagre',
6dd74de195
6dd74de196 // theme: 'default',
6dd74de197 // look: 'classic',
6dd74de198 flowchart: { titleTopMargin: 10 },
6dd74de199 fontFamily: 'Recursive',
6dd74de200 sequence: {
6dd74de201 actorFontFamily: 'courier',
6dd74de202 noteFontFamily: 'courier',
6dd74de203 messageFontFamily: 'courier',
6dd74de204 },
6dd74de205 kanban: {
6dd74de206 htmlLabels: false,
6dd74de207 },
6dd74de208 fontSize: 16,
6dd74de209 logLevel: 0,
6dd74de210 securityLevel: 'loose',
6dd74de211 callback,
6dd74de212 });
6dd74de213 // setTimeout(() => {
6dd74de214 mermaid.init(undefined, document.querySelectorAll('.mermaid'));
6dd74de215 // }, 1000);
6dd74de216 mermaid.parseError = function (err, hash) {
6dd74de217 console.error('In parse error:');
6dd74de218 console.error(err);
6dd74de219 };
6dd74de220 </script>
6dd74de221 </body>
6dd74de222</html>