collab/mermaid/demos/timeline.htmlblame
View source
6dd74de1<!doctype html>
6dd74de2<html>
6dd74de3 <head>
6dd74de4 <meta charset="utf-8" />
6dd74de5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6dd74de6 <title>Mermaid Quick Test Page</title>
6dd74de7 <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
6dd74de8 <style>
6dd74de9 div.mermaid {
6dd74de10 /* font-family: 'trebuchet ms', verdana, arial; */
6dd74de11 font-family: 'Courier New', Courier, monospace !important;
6dd74de12 }
6dd74de13 </style>
6dd74de14 </head>
6dd74de15
6dd74de16 <body>
6dd74de17 <pre class="mermaid">
6dd74de18 timeline
6dd74de19 title My day
6dd74de20 section Go to work
6dd74de21 1930 : first step : second step
6dd74de22 : third step
6dd74de23 1940 : fourth step : fifth step
6dd74de24 </pre>
6dd74de25
6dd74de26 <h2>Medical Device Lifecycle Timeline</h2>
6dd74de27 <pre class="mermaid">
6dd74de28 timeline
6dd74de29 title Medical Device Lifecycle
6dd74de30 section Planning
6dd74de31 Quality Management System (4) : Regulatory Compliance (4.1) : Risk Management (4.1.3) : Management Review (5.6) : Infrastructure (6.3)
6dd74de32 Management Responsibility (5) : Planning Activities (5.2) : Human Resources (6.2) : RnD Planning (7.3.2) : Purchasing Process (7.4.1) : Production Activities (7.5.1) : Installation Activities (7.5.3) : Servicing Activities (7.5.4)
6dd74de33 section Realization
6dd74de34 Research and Development (7.3) : Inputs (7.3.3) : Outputs (7.3.4) : Review (7.3.5) : Verification (7.3.6) : Validation (7.3.7)
6dd74de35 Purchasing (7.4) : Purchasing Information (7.4.2) : Production Feedback (8.2.1)
6dd74de36 Production (7.5) : Production Feedback (8.2.1)
6dd74de37 Installation (7.5.3) : Installation Activities (7.5.3)
6dd74de38 Servicing (7.5.4) : Servicing Activities (7.5.4)
6dd74de39 section Post-Production
6dd74de40 Post-Market Activities (8) : Feedback (8.2.1) : Complaints (8.2.2) : Adverse Events (8.2.3)
6dd74de41 </pre>
6dd74de42
6dd74de43 <script type="module">
6dd74de44 import mermaid from './mermaid.esm.mjs';
6dd74de45 mermaid.initialize({
6dd74de46 theme: 'forest',
6dd74de47 logLevel: 1,
6dd74de48 securityLevel: 'loose',
6dd74de49 flowchart: { curve: 'basis' },
6dd74de50 gantt: { axisFormat: '%m/%d/%Y' },
6dd74de51 sequence: { actorMargin: 50 },
6dd74de52 });
6dd74de53 </script>
6dd74de54 </body>
6dd74de55</html>