Advanced

Flow Charts

There is a library named flowchart.js that can be used to create flow charts. The syntax is documented here and below is an example.

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.15.0/flowchart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
if (typeof jQuery != 'undefined') {
    (function( $ ) {
        $.fn.flowchart = function( options ) {
            return this.each(function() {
            var $this = $(this);
            var diagram = flowchart.parse($this.text());
            $this.html('');
            diagram.drawSVG(this, options);
            });
        };
    })( jQuery );
}
</script>

<div class="diagram">
st=>start: Start:>https://www.mbari.org[blank]
e=>end: End:>https://www.mbari.org
op1=>operation: Operation1
op2=>operation: Operation2
sub1=>subroutine: Subroutine1
cond=>condition: Decision1
c2=>condition: Decision2
io=>inputoutput: Need info

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
</div>

<script>
$(".diagram").flowchart();
</script>

st=>start: Start:>https://www.mbari.org[blank] e=>end: End:>https://www.mbari.org op1=>operation: Operation1 op2=>operation: Operation2 sub1=>subroutine: Subroutine1 cond=>condition: Decision1 c2=>condition: Decision2 io=>inputoutput: Need info st->op1(right)->cond cond(yes, right)->c2 cond(no)->sub1(left)->op1 c2(yes)->io->e c2(no)->op2->e

Sequence Diagrams

Another diagram type that you can use is sequence diagrams. You can use the js-sequence-diagrams library. Here is an example:

<script src="https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.11.0/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-sequence-diagrams/1.0.6/sequence-diagram-min.js"></script>

<div class="seq-diagram">
Title: MBARI Sequence Diagram
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow
Note left of A: Note to the\n left of A
Note right of B: Note to the\n right of B
Note right of D: Note to the\n right of D
</div>
<script>
$(".seq-diagram").sequenceDiagram({theme: 'simple'});
</script>

Renders out to:

Title: MBARI Sequence Diagram A->B: Normal line B-->C: Dashed line C->>D: Open arrow D-->>A: Dashed open arrow Note left of A: Note to the\n left of A Note right of B: Note to the\n right of B Note right of D: Note to the\n right of D

Advanced Tables

You can embed advanced data tables using the DataTables JavaScript library and CSS. Here is an example:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css">
<table id="example" class="display" style="width:100%">
  <thead><tr><th>Date</th><th>Temp(C)</th><th>Sal(psu)</th><th>Depth(m)</th><th>Chl(mg/m^3)</th></tr></thead>
  <tbody>
    <tr><td>2020-02-19 19:52:34.34</td><td>22.8719</td><td>36.2036</td><td>15.132</td><td>1.2729</td></tr>
    <tr><td>2020-02-19 20:02:34.34</td><td>22.4885</td><td>36.1981</td><td>15.248</td><td>1.4179</td></tr>
    <tr><td>2020-02-19 20:12:34.34</td><td>22.4566</td><td>36.2077</td><td>15.133</td><td>1.4103</td></tr>
.
.
.
    <tr><td>2020-02-21 06:52:34.34</td><td>22.1736</td><td>36.2389</td><td>15.642</td><td>1.9901</td></tr>
  </tbody>
</table>
<script>
$("#example").DataTable();
</script>

Renders:

Date	Temp(C)	Sal(psu)	Depth(m)	Chl(mg/m^3)
2020-02-19 19:52:34.34	22.8719	36.2036	15.132	1.2729
2020-02-19 20:02:34.34	22.4885	36.1981	15.248	1.4179
2020-02-19 20:12:34.34	22.4566	36.2077	15.133	1.4103
2020-02-19 20:22:34.34	22.4506	36.2062	15.161	1.4179
2020-02-19 20:32:34.34	22.4369	36.21	15.121	1.4026
2020-02-19 20:42:34.34	22.4082	36.212	15.093	1.456
2020-02-19 20:52:34.34	22.4016	36.211	15.096	1.4484
2020-02-19 21:02:34.34	22.5389	36.2035	15.162	1.4179
2020-02-19 21:12:34.34	22.5565	36.2043	15.171	1.456
2020-02-19 21:22:34.34	22.5919	36.2052	15.14	1.5018
2020-02-19 21:32:34.34	22.6054	36.2055	15.117	1.4865
2020-02-19 21:42:34.34	22.5744	36.2054	15.117	1.5018
2020-02-19 21:52:34.34	22.5447	36.2062	15.186	1.4637
2020-02-19 22:02:34.34	22.5352	36.2065	15.103	1.4865
2020-02-19 22:12:34.34	22.4656	36.2066	15.089	1.5247
2020-02-19 22:22:34.34	22.4112	36.2134	15.149	1.601
2020-02-19 22:32:34.34	22.4014	36.214	15.121	1.6162
2020-02-19 22:42:34.34	22.4043	36.2119	15.132	1.5628
2020-02-19 22:52:34.34	22.4227	36.2002	15.047	1.5247
2020-02-19 23:02:34.34	22.4067	36.2001	15.054	1.5705
2020-02-19 23:12:34.34	22.3988	36.2043	15.131	1.6239
2020-02-19 23:22:34.34	22.4007	36.2009	15.043	1.5552
2020-02-19 23:32:34.34	22.412	36.2032	14.998	1.5247
2020-02-19 23:42:34.34	22.407	36.2027	15.09	1.5552
2020-02-19 23:52:34.34	22.4094	36.2029	15.063	1.601
2020-02-20 00:02:34.34	22.4104	36.2036	15.081	1.5323
2020-02-20 00:12:34.34	22.4024	36.2036	15.091	1.54
2020-02-20 00:22:34.34	22.4102	36.2045	15.078	1.4942
2020-02-20 00:32:34.34	22.4151	36.2057	15.006	1.5705
2020-02-20 00:42:34.34	22.4264	36.2062	15.006	1.4789
2020-02-20 00:52:34.34	22.4199	36.2057	15.038	1.5094
2020-02-20 01:02:34.34	22.4425	36.2071	15.031	1.4789
2020-02-20 01:12:34.34	22.4383	36.2077	14.994	1.5094
2020-02-20 01:22:34.34	22.429	36.2059	14.985	1.4789
2020-02-20 01:32:34.34	22.4171	36.2063	15.031	1.4865
2020-02-20 01:42:34.34	22.4246	36.2069	15.035	1.4942
2020-02-20 01:52:34.34	22.4259	36.2072	15.047	1.4789
2020-02-20 02:02:34.34	22.4208	36.2076	14.97	1.4865
2020-02-20 02:12:34.34	22.4298	36.209	15.006	1.4713
2020-02-20 02:22:34.34	22.4303	36.2089	15.044	1.4713
2020-02-20 02:32:34.34	22.4316	36.2093	15.002	1.4789
2020-02-20 02:42:34.34	22.4277	36.2092	15.073	1.4942
2020-02-20 02:52:34.34	22.4236	36.2092	14.975	1.5171
2020-02-20 03:02:34.34	22.4253	36.2094	15.025	1.54
2020-02-20 03:12:34.34	22.422	36.2095	15.001	1.4942
2020-02-20 03:22:34.34	22.4181	36.2092	14.984	1.5171
2020-02-20 03:32:34.34	22.42	36.2099	14.888	1.5323
2020-02-20 03:42:34.34	22.4145	36.2079	14.911	1.4865
2020-02-20 03:52:34.34	22.4099	36.2093	14.898	1.4942
2020-02-20 04:02:34.34	22.4075	36.2092	14.887	1.5171
2020-02-20 04:12:34.34	22.4081	36.2092	14.946	1.5171
2020-02-20 04:22:34.34	22.4037	36.2093	14.894	1.4789
2020-02-20 04:32:34.34	22.4039	36.2092	14.942	1.4789
2020-02-20 04:42:34.34	22.4036	36.209	14.886	1.5247
2020-02-20 04:52:34.34	22.4027	36.2097	14.863	1.4713
2020-02-20 05:02:34.34	22.4024	36.2087	14.933	1.4637
2020-02-20 05:12:34.34	22.4012	36.2093	14.862	1.4865
2020-02-20 05:22:34.34	22.3996	36.209	14.898	1.5781
2020-02-20 05:32:34.34	22.4002	36.2072	14.847	1.4789
2020-02-20 05:42:34.34	22.404	36.2056	14.806	1.456
2020-02-20 05:52:34.34	22.4099	36.2076	14.818	1.4789
2020-02-20 06:02:34.34	22.4025	36.2064	14.777	1.456
2020-02-20 06:12:34.34	22.4001	36.2054	14.855	1.4789
2020-02-20 06:22:34.34	22.4005	36.2058	14.851	1.4637
2020-02-20 06:32:34.34	22.4001	36.2052	14.719	1.4408
2020-02-20 06:42:34.34	22.4023	36.2063	14.705	1.456
2020-02-20 06:52:34.34	22.3996	36.2072	14.78	1.4942
2020-02-20 07:02:34.34	22.5285	36.1615	14.706	1.4255
2020-02-20 07:12:34.34	22.4564	36.188	14.742	1.5476
2020-02-20 07:22:34.34	22.5192	36.1647	14.793	1.4103
2020-02-20 07:32:34.34	22.5101	36.1684	14.749	1.4331
2020-02-20 07:42:34.34	22.529	36.161	14.698	1.4255
2020-02-20 07:52:34.34	22.5354	36.1577	14.709	1.4713
2020-02-20 08:02:34.34	22.5083	36.1704	14.574	1.456
2020-02-20 08:12:34.34	22.5319	36.1592	14.647	1.4408
2020-02-20 08:22:34.34	22.5237	36.1621	14.636	1.4331
2020-02-20 08:32:34.34	22.5123	36.1657	14.652	1.4789
2020-02-20 08:42:34.34	22.4419	36.1913	14.614	1.4713
2020-02-20 08:52:34.34	22.502	36.1697	14.562	1.456
2020-02-20 09:02:34.34	22.5108	36.1656	14.657	1.4331
2020-02-20 09:12:34.34	22.5368	36.1605	14.63	1.456
2020-02-20 09:22:34.34	22.5744	36.1532	14.571	1.4331
2020-02-20 09:32:34.34	22.6095	36.1477	14.603	1.4026
2020-02-20 09:42:34.34	22.557	36.1592	14.615	1.4484
2020-02-20 09:52:34.34	22.5799	36.1534	14.587	1.456
2020-02-20 10:02:34.34	22.5363	36.1645	14.6	1.4255
2020-02-20 10:12:34.34	22.5554	36.1616	14.561	1.4408
2020-02-20 10:22:34.34	22.5908	36.1559	14.612	1.4103
2020-02-20 10:32:34.34	22.6001	36.1536	14.57	1.4103
2020-02-20 10:42:34.34	22.5657	36.1632	14.483	1.4255
2020-02-20 10:52:34.34	22.5971	36.1572	14.574	1.4179
2020-02-20 11:02:34.34	22.6365	36.1498	14.603	1.4103
2020-02-20 11:12:34.34	22.6324	36.1508	14.507	1.4179
2020-02-20 11:22:34.34	22.6489	36.0943	14.528	1.3721
2020-02-20 11:32:34.34	22.7158	36.1389	14.525	1.3645
2020-02-20 11:42:34.34	22.7076	36.1409	14.547	1.3568
2020-02-20 11:52:34.34	22.61	36.1561	14.617	1.3874
2020-02-20 12:02:34.34	22.6001	36.157	14.543	1.395
2020-02-20 12:12:34.34	22.5842	36.1587	14.567	1.4789
2020-02-20 12:22:34.34	22.5805	36.1605	14.548	1.456
2020-02-20 12:32:34.34	22.5931	36.1571	14.56	1.4331
2020-02-20 12:42:34.34	22.6004	36.157	14.6	1.4637
2020-02-20 12:52:34.34	22.5854	36.1593	14.547	1.4179
2020-02-20 13:02:34.34	22.5749	36.1616	14.563	1.4789
2020-02-20 13:12:34.34	22.5473	36.1665	14.591	1.4408
2020-02-20 13:22:34.34	22.5882	36.1597	14.57	1.4179
2020-02-20 13:32:34.34	22.6085	36.1571	14.58	1.4103
2020-02-20 13:42:34.34	22.5389	36.1699	14.661	1.4484
2020-02-20 13:52:34.34	22.588	36.159	14.618	1.4789
2020-02-20 14:02:34.34	22.6007	36.1567	14.58	1.4713
2020-02-20 14:12:34.34	22.5622	36.1655	14.658	1.4408
2020-02-20 14:22:34.34	22.6009	36.1574	14.663	1.395
2020-02-20 14:32:34.34	22.5693	36.1637	14.621	1.395
2020-02-20 14:42:34.34	22.5726	36.1616	14.689	1.4103
2020-02-20 14:52:34.34	22.5601	36.1647	14.691	1.4103
2020-02-20 15:02:34.34	22.5711	36.1626	14.749	1.4789
2020-02-20 15:12:34.34	22.544	36.1673	14.712	1.4255
2020-02-20 15:22:34.34	22.5638	36.1642	14.757	1.4331
2020-02-20 15:32:34.34	22.5549	36.166	14.733	1.4637
2020-02-20 15:42:34.34	22.5514	36.167	14.697	1.4408
2020-02-20 15:52:34.34	22.5704	36.164	14.826	1.4713
2020-02-20 16:02:34.34	22.5657	36.1638	14.818	1.4713
2020-02-20 16:12:34.34	22.5577	36.1664	14.826	1.4789
2020-02-20 16:22:34.34	22.5441	36.1692	14.845	1.4942
2020-02-20 16:32:34.34	22.5962	36.1609	14.859	1.4789
2020-02-20 16:42:34.34	22.54	36.1692	14.896	1.5094
2020-02-20 16:52:34.34	22.5553	36.1792	14.884	1.4865
2020-02-20 17:02:34.34	22.5647	36.1657	14.855	1.5476
2020-02-20 17:12:34.34	22.6041	36.157	14.992	1.5323
2020-02-20 17:22:34.34	22.5746	36.1644	14.99	1.5247
2020-02-20 17:32:34.34	22.5638	36.1667	14.934	1.54
2020-02-20 17:42:34.34	22.5574	36.1658	15.022	1.54
2020-02-20 17:52:34.34	22.578	36.162	15.065	1.54
2020-02-20 18:02:34.34	22.4926	36.1773	15.088	1.601
2020-02-20 18:12:34.34	22.5471	36.1675	15.114	1.5781
2020-02-20 18:22:34.34	22.5141	36.174	15.025	1.6162
2020-02-20 18:32:34.34	22.5201	36.1725	15.073	1.5705
2020-02-20 18:42:34.34	22.5082	36.1757	15.08	1.601
2020-02-20 18:52:34.34	22.4739	36.1822	15.268	1.5781
2020-02-20 19:02:34.34	22.4922	36.1787	15.102	1.5781
2020-02-20 19:12:34.34	22.497	36.1781	15.263	1.5628
2020-02-20 19:22:34.34	22.4949	36.1794	14.974	1.6239
2020-02-20 19:32:34.34	22.4803	36.1784	15.199	1.6239
2020-02-20 19:42:34.34	22.4797	36.1792	14.953	1.6468
2020-02-20 19:52:34.34	22.4785	36.1794	15.324	1.6391
2020-02-20 20:02:34.34	22.4663	36.1808	15.294	1.6697
2020-02-20 20:12:34.34	22.4624	36.1819	15.426	1.7002
2020-02-20 20:22:34.34	22.4522	36.1826	15.184	1.6544
2020-02-20 20:32:34.34	22.4291	36.1862	15.299	1.7154
2020-02-20 20:42:34.34	22.4224	36.1873	15.575	1.7002
2020-02-20 20:52:34.34	22.3995	36.1903	15.32	1.7231
2020-02-20 21:02:34.34	22.3872	36.194	14.983	1.7231
2020-02-20 21:12:34.34	22.3721	36.195	15.152	1.7459
2020-02-20 21:22:34.34	22.3657	36.1966	15.548	1.7917
2020-02-20 21:32:34.34	22.3519	36.1985	15.39	1.7765
2020-02-20 21:42:34.34	22.3544	36.198	14.782	1.868
2020-02-20 21:52:34.34	22.3445	36.1997	15.392	1.9291
2020-02-20 22:02:34.34	22.3306	36.2023	15.299	1.8909
2020-02-20 22:12:34.34	22.3303	36.2042	15.294	1.868
2020-02-20 22:22:34.34	22.3179	36.2045	15.376	1.8909
2020-02-20 22:32:34.34	22.3011	36.2058	15.16	1.9825
2020-02-20 22:42:34.34	22.2933	36.2077	15.323	1.9062
2020-02-20 22:52:34.34	22.2896	36.2087	15.207	1.9443
2020-02-20 23:02:34.34	22.2749	36.211	14.749	1.9901
2020-02-20 23:12:34.34	22.2601	36.2137	15.535	2.013
2020-02-20 23:22:34.34	22.2591	36.2149	15.28	1.9672
2020-02-20 23:32:34.34	22.255	36.216	15.498	2.013
2020-02-20 23:42:34.34	22.2407	36.2156	15.462	2.0054
2020-02-20 23:52:34.34	22.2354	36.2197	15.274	2.0359
2020-02-21 00:02:34.34	22.2282	36.2203	15.747	2.0816
2020-02-21 00:12:34.34	22.2244	36.2208	15.081	2.0359
2020-02-21 00:22:34.34	22.2213	36.2231	15.299	1.9901
2020-02-21 00:32:34.34	22.2229	36.2266	15.417	2.1122
2020-02-21 00:42:34.34	22.2148	36.226	15.261	2.0664
2020-02-21 00:52:34.34	22.2191	36.2275	15.35	2.0893
2020-02-21 01:02:34.34	22.1985	36.2275	14.96	2.0664
2020-02-21 01:12:34.34	22.2059	36.2294	15.135	2.0893
2020-02-21 01:22:34.34	22.1996	36.2293	15.244	2.0664
2020-02-21 01:32:34.34	22.2058	36.23	14.905	2.0054
2020-02-21 01:42:34.34	22.1909	36.2324	15.308	2.0816
2020-02-21 01:52:34.34	22.2084	36.2333	15.74	2.0816
2020-02-21 02:02:34.34	22.2011	36.2316	15.63	2.0511
2020-02-21 02:12:34.34	22.2016	36.2325	15.405	1.9443
2020-02-21 02:22:34.34	22.2136	36.2329	15.434	2.0435
2020-02-21 02:32:34.34	22.2126	36.2348	15.602	2.0664
2020-02-21 02:42:34.34	22.204	36.2346	14.95	1.9672
2020-02-21 02:52:34.34	22.207	36.2331	14.238	1.9291
2020-02-21 03:02:34.34	22.2142	36.2342	15.85	1.9672
2020-02-21 03:12:34.34	22.2173	36.2329	15.627	1.9825
2020-02-21 03:22:34.34	22.2033	36.2348	15.047	2.1045
2020-02-21 03:32:34.34	22.2145	36.2353	16.447	1.9672
2020-02-21 03:42:34.34	22.2034	36.2354	15.758	2.0664
2020-02-21 03:52:34.34	22.2051	36.2359	15.359	1.9901
2020-02-21 04:02:34.34	22.1999	36.2374	15.863	2.0893
2020-02-21 04:12:34.34	22.1914	36.2357	15.1	2.0206
2020-02-21 04:22:34.34	22.1957	36.2374	14.959	1.9901
2020-02-21 04:32:34.34	22.1988	36.2376	15.022	1.9901
2020-02-21 04:42:34.34	22.1928	36.2408	15.411	2.013
2020-02-21 04:52:34.34	22.1912	36.2403	15.047	2.0054
2020-02-21 05:02:34.34	22.1964	36.2374	15.515	2.0206
2020-02-21 05:12:34.34	22.1689	36.241	15.603	2.0435
2020-02-21 05:22:34.34	22.1834	36.243	15.43	2.0664
2020-02-21 05:32:34.34	22.1827	36.2407	15.29	2.0282
2020-02-21 05:42:34.34	22.1753	36.2412	13.779	1.9901
2020-02-21 05:52:34.34	22.1718	36.2426	15.712	2.0816
2020-02-21 06:02:34.34	22.1657	36.2442	15.492	2.1122
2020-02-21 06:12:34.34	22.1679	36.2411	15.905	2.0359
2020-02-21 06:22:34.34	22.1693	36.242	14.323	2.0664
2020-02-21 06:32:34.34	22.1647	36.2403	14.557	2.0816
2020-02-21 06:42:34.34	22.1577	36.2415	15.594	2.0511
2020-02-21 06:52:34.34	22.1736	36.2389	15.642	1.9901

Highcharts

You can even do complex Highcharts style stuff.

<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/8.2.2/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/8.2.2/modules/exporting.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/8.2.2/modules/export-data.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/8.2.2/modules/accessibility.min.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>
<script>
  Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Monthly Average Temperature'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
        title: {
            text: 'Temperature (°C)'
        }
    },
    plotOptions: {
        line: {
            dataLabels: {
                enabled: true
            },
            enableMouseTracking: false
        }
    },
    series: [{
        name: 'Tokyo',
        data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }, {
        name: 'London',
        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    }]
});
</script>

Will render the following: