forked from ksagala/Licensing
-
Notifications
You must be signed in to change notification settings - Fork 7
Expand file tree
/
Copy pathguide.htm
More file actions
667 lines (534 loc) · 51.9 KB
/
Copy pathguide.htm
File metadata and controls
667 lines (534 loc) · 51.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="index, follow" />
<meta name="referrer" content="origin" />
<meta name="theme-color" content="#002266" />
<meta name="application-name" content="M365 Maps" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="white" />
<meta name="apple-mobile-web-app-title" content="M365 Maps" />
<meta name="description" content="M365 Maps user guide describes the features and functions of the site and also references and contact details" />
<meta name="author" content="Aaron Dinnage" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:image" content="https://m365maps.com/media/summary.png" />
<meta name="twitter:image:alt" content="M365 Maps user guide" />
<meta name="twitter:site" content="@AaronDinnage" />
<meta name="twitter:creator" content="@AaronDinnage" />
<meta property="article:author" content="Aaron Dinnage" />
<meta property="og:type" content="website" />
<meta property="og:title" content="User Guide" />
<meta property="og:description" content="M365 Maps user guide describes the features and functions of the site and also references and contact details" />
<meta property="og:site_name" content="M365 Maps" />
<meta property="og:image" content="https://m365maps.com/media/summary_large_image.png" />
<meta property="og:image:alt" content="M365 Maps user guide" />
<meta property="og:url" content="https://m365maps.com/guide.htm" />
<link rel="canonical" href="https://m365maps.com/guide.htm" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/media/favicon.svg" type="image/svg+xml" sizes="any" />
<link rel="apple-touch-icon" sizes="180x180" href="/media/apple-touch-icon.png" />
<link rel="license" href="https://creativecommons.org/licenses/by/4.0/" />
<link rel="manifest" href="/manifest.json" />
<link rel="stylesheet" href="/css/common.min.css" />
<link rel="stylesheet" href="/css/guide.min.css" />
<script src="/js/common.min.js"></script>
<script src="/js/guide.min.js"></script>
<title>User Guide | M365 Maps</title>
</head>
<body>
<a class="skip-link" href="#toc">Skip to main content</a>
<h1>User Guide</h1>
<div class="divider"></div>
<div id="menu"><a href="/" class="home-link">Home</a></div>
<h2 id="toc"><a href="#toc" class="header-link">Table of Contents</a></h2>
<ol class="toc">
<li><a href="#about">About m365maps.com</a></li>
<li><a href="#home">Home page</a></li>
<li><a href="#viewsvg">View diagram</a></li>
<li><a href="#saved">Saved diagrams</a></li>
<li><a href="#compare">Compare diagrams</a></li>
<li><a href="#matrix">Feature matrix</a></li>
<li><a href="#settings">Settings</a></li>
<li><a href="#teams">M365 Maps for Teams</a></li>
<li><a href="#browsers">Browser compatibility</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#privacy">Privacy policy</a></li>
<li><a href="#terms">Terms of use</a></li>
<li><a href="#references">References</a></li>
</ol>
<div class="divider spacer"></div>
<h2 id="about"><a href="#about" class="header-link">About m365maps.com</a></h2>
<p>m365maps.com is my personal collection of <strong>Microsoft 365 Licensing Diagrams</strong> and reference material, regularly updated as product names, feature inclusions, and license types change.</p>
<p>Each diagram illustrates the key features and overlap between different license types. The diagrams load in your browser and you can click on the feature tiles to navigate to official online documentation. There are many more features to explore, described within this user guide.</p>
<p>You will also find the PDF, PNG, and SVG versions of the diagrams along with the Visio source files on <a href="https://github.com/AaronDinnage/Licensing/" target="_blank">GitHub</a> or the <a href="/downloads.htm">Downloads</a> page on this site. PDF, PNG, and SVG versions are also downloadable from their diagram view pages on this site.</p>
<p>I work for Microsoft Australia and I create these diagrams in my free time, so it goes without saying that this is <strong>not official Microsoft material</strong>. The site contains visual representations of the product licensing that I've derived from Microsoft's online and partner-facing resources. This site does not represent Microsoft, and no warranty is given or implied. You should always work with your Microsoft account team or authorised reseller before making a purchasing decision.</p>
<p>I try to carefully balanced the level of detail to ensure all the important features and license types are accounted for, but not every feature is present in these diagrams. There are just too many to include! So my offer to you is that if you see something missing and believe it should be there please <a href="#contact">contact me</a> and I will do my best to build it in to a later release.</p>
<p>There are feedback and bug report forms in the <a href="#contact">contact</a> section below. All feedback is greatly appreciated!</p>
<p>Feel free to <a href="#contact">connect with me</a> on Twitter or LinkedIn if you'd like to follow update announcements or discuss the project or Microsoft 365 licensing with me.</p>
<p>The m365maps.com web site is an enjoyable side-project as it allows me to have fun coding, which I no longer do as my day job. I decided I would maintain the site with very simple HTML, CSS, and JavaScript. Everything is hand crafted without frameworks, libraries, or external dependencies of any kind.</p>
<p>I first started publishing these diagrams for free on Twitter, back in 2017. All along the way people have asked about how they could pay me back for the work I’ve done on them. I’ve put countless hours of my own time into maintaining and developing this collection and I know many professionals get daily use from these diagrams in their work. I use them myself every day too. In response to that regular request I’ve set up a page on PayPal where <a href="https://paypal.me/aarondinnage" target="_blank">you can donate</a> any amount you wish, if you feel that way inclined. If I can cover my domain registration and associated costs then I'll be really pleased! So if you’ve found these diagrams useful and you’d like to give something back then you are welcome to make a donation, but please understand that you’re not paying me for future work. I can’t promise I’ll always be able to keep these up to date, but I will for as long as I can. And I've made it open source on GitHub in the meantime!</p>
<p>Cheers,</p>
<p> – <a href="#contact">Aaron</a>.</p>
<div class="section-links">
<a href="#top" class="top-link">Page top</a>
—
<a href="#about" class="section-link">Section top</a>
</div>
<h2 id="home"><a href="#home" class="header-link">Home page</a></h2>
<p>The home page is the first page you reach when you navigate to <a href="https://m365maps.com/" target="_blank">m365maps.com</a>.</p>
<p>When the site loads for the first time, and after each update on GitHub, it reaches out and caches all the core web site components and the full collection of diagrams (SVG format). This happens as a background task in your browser so you don't have to wait. Within a matter of seconds you can go offline and still have full access to every page and every diagram. It only does this once until the next time either the web site files or the diagrams are updated.</p>
<p>This all means that day-to-day there is very little traffic generated by the site and it remains fast to access and navigate. The entire offline cache to run the December, 2021 release of the web site (including diagrams) uses less than 3 megabytes of storage. So the site is not only fast, but also friendly to low bandwidth devices and networks.</p>
<img src="/media/page-home1.png" class="screenshot" width="600" height="400" alt="Home page screenshot" />
<ul>
<li>
<h3>Diagram date</h3>
<p>The month and year of the last update is posted directly under the web site name heading. In the example screenshot above you can see the site was last updated in January, 2022.</p>
</li>
<li>
<h3>Groups</h3>
<p>All diagrams are grouped by license type. For example, all stand-alone EMS licenses are represented in the diagrams associated with the group "Enterprise Mobility + Security (EMS)" shown in the screenshot above.</p>
</li>
<li>
<h3>Diagram links</h3>
<p>In the screenshot you can see the diagrams listed to the right of the group header. Depending on your browser, device, and screen size this may be all in a line horizontally, clustered, or listed under the group name. Each diagram link will take you to the <a href="#viewsvg">view diagram</a> page.
</li>
<li>
<h3>Flags</h3>
<p>You can flag your most commonly accessed or preferred diagrams to make them visually stand out and be easier to find in the list. This icon <span class="icon icon-flagged"></span> means the diagram is flagged. To flag a diagram you must open the diagram link and then click the flag button on the diagram view page. Flags are stored and persist between sessions.</p>
</li>
<li>
<h3>New content indicator</h3>
<p>Any diagram groups that have been added, or added to, in the most recent update will have the following red asterisk indicator next to them:<span class="new"></span>. At the following update the new content indicator will be removed.</p>
</li>
<li>
<h3>Draft diagrams</h3>
<p>From time to time I will publish draft diagrams that are not yet ready for release but are included to gather feedback or test a new feature. Draft diagrams will include the word "DRAFT" in the diagram list and have the word "DRAFT" watermarked on the diagram (including SVG, PNG, and PDF downloads).</p>
</li>
</ul>
<div class="spacer"></div>
<img src="/media/page-home2.png" class="screenshot" width="600" height="400" alt="Home page lower screenshot" />
<ul class="no-bullet-list">
<li>
<h3><span class="icon icon-rename"></span> Product name changes</h3>
<p>Navigates to the <a href="#renames">product name changes</a> page, which lists recent Microsoft product name changes with links to announcements and product details.</p>
</li>
<li>
<h3><span class="icon icon-compare"></span> Compare diagrams</h3>
<p>Navigates to the <a href="#compare">compare diagrams</a> page, where you can create a sliding side-by-side comparison between two site or saved diagrams.</p>
</li>
<li>
<h3><span class="icon icon-save"></span> Saved diagrams</h3>
<p>Navigates to the <a href="#saved">saved diagrams</a> list. When viewing a diagram it is possible to make highlights and add drawings and text annotations, which can be saved and displayed at a later time. More information on <a href="#viewsvg-edit">Edit modes</a> are available in this guide.</p>
</li>
<li>
<h3><span class="icon icon-matrix"></span> Feature matrix</h3>
<p>Navigates to the <a href="#matrix">feature matrix</a> page, where you can view a table of feature inclusions across a range of license types with the ability to filter and search.</p>
</li>
<li>
<h3><span class="icon icon-changes"></span> Change log</h3>
<p>Navigates to the <a href="/changes.htm">change log</a> which details the history of changes with each site update.</p>
</li>
<li>
<h3><span class="icon icon-guide"></span> User guide</h3>
<p>Navigates to this user guide.</p>
</li>
<li>
<h3><span class="icon icon-download"></span> Downloads</h3>
<p>Navigates to a page of download links for every diagram, in PDF, PNG, and SVG format. The <a href="/downloads.htm">downloads page</a> also includes Visio source files, a PowerPoint slide deck, an Excel spreadsheet of the feature matrix, and the <a href="#teams">M365 Maps for Teams</a> app.</p>
</li>
<li>
<h3><span class="icon icon-settings"></span> Settings</h3>
<p>Navigates to the <a href="#settings">settings page</a> for the web site where various configurations can be made.</p>
</li>
</ul>
<div class="section-links">
<a href="#top" class="top-link">Page top</a>
—
<a href="#home" class="section-link">Section top</a>
</div>
<h2 id="viewsvg"><a href="#viewsvg" class="header-link">View diagram - Page features</a></h2>
<img src="/media/page-viewsvg.png" class="screenshot" width="600" height="400" alt="View diagram page screenshot" />
<ul>
<li>
<h3>Feature links</h3>
<p>The feature tiles within each diagram link to further online documentation. All links open in a new browser tab so you won't lose your place with the diagram you are viewing.</p>
</li>
<li>
<h3>Zoom</h3>
<p>The mouse scroll wheel is used to zoom in and out when viewing a diagram. This operates in much the same way as a street map website would. When you zoom with the mouse wheel the page will be scrolled to keep the point under the mouse cursor from being zoomed out of view.</p>
<p>Zooming in and out can also be achieved with the + and - keys, and = resets the zoom level.</p>
<p>Pinch to zoom remains available on touch screen and touch pad equipped devices.</p>
<p>Clicking the zoom wheel button / middle mouse button on the diagram will reset the zoom level to the default. The default zoom level is also applied when you first open the view diagram page. The default zoom level can be configured on the <a href="#settings">Settings</a> page.</p>
</li>
<li>
<h3>Drag to scroll</h3>
<p>You can click and drag the diagram using the left mouse button, or with touch drag on touch screen devices, to move around the diagram.</p>
<p>Clicking and dragging will not follow a link within a diagram. Only clicking without drag movement will follow a link in the diagram.</p>
</li>
</ul>
<h2 id="viewsvg-menu"><a href="#viewsvg-menu" class="header-link">View diagram - Menu features</a></h2>
<p>The collapsible menu in the upper-right corner of the view diagram page gives you quick access to a number of navigation options and other features depending on your device and the viewing mode you are in.</p>
<div class="menu-mockup">
<span class="icon icon-close" title="Close menu"></span>
<span class="icon icon-back" title="Back"></span>
<span class="icon icon-unflagged" title="Flag this diagram"></span>
<span class="icon icon-save" title="Save a copy"></span>
<span class="icon icon-controls" title="Controls"></span>
<span class="icon icon-edit" title="Edit modes"></span>
<span class="icon icon-download" title="Download PDF">PDF</span>
<span class="icon icon-download" title="Download PNG">PNG</span>
</div>
<p>The standard menu arrangement, as pictured above, appears when you first navigate to a diagram. It is possible to set the menu to be automatically collapsed or open by default, this is detailed in the <a href="#settings">Settings</a> portion of this guide.</p>
<p>Depending on your device and viewing mode the following actions may be available within the menu:</p>
<div class="table-icon-description">
<span class="header-icon">Icon</span>
<span class="header-description">Description</span>
<div class="table-divider"></div>
<div class="row-icon"><span class="icon icon-open"></span> / <span class="icon icon-close"></span></div>
<div class="row-description">In all modes it is possible to expand or collapse the menu by clicking on the chevron at the start (left-most) of the menu.</div>
<div class="table-divider"></div>
<div class="row-icon"><span class="icon icon-back"></span></div>
<div class="row-description">All modes include the back button which returns you to the previous page. If your previous page was outside m365maps.com or you loaded from a bookmark then the back button will take you to the m365maps.com home page.</div>
<div class="table-divider"></div>
<div class="row-icon"><span class="icon icon-unflagged"></span> / <span class="icon icon-flagged"></span></div>
<div class="row-description">These icons indicate whether the diagram is flagged or not and can be clicked to toggle the flag on the current diagram.</div>
<div class="table-divider"></div>
<div class="row-icon"><span class="icon icon-save"></span></div>
<div class="row-description">Clicking Save will store a copy of the current diagram which can be retrieved later from the <a href="#saved">Saved diagrams</a> page. Saved diagrams can be further edited, exported, or used for side-by-side comparison from the <a href="#compare">Compare diagrams</a> page.</div>
<div class="table-divider"></div>
<div class="row-icon"><span class="icon icon-controls"></span></div>
<div class="row-description">Opens and closes the image controls panel which allows for adjustments to the diagram brightness, contrast, hue, and saturation. There is more information on <a href="#controls">Image controls</a> later in this guide.</div>
<div class="table-divider"></div>
<div class="row-icon"><span class="icon icon-edit"></span></div>
<div class="row-description">This icon opens or closes the edit modes panel. There is more information on <a href="#viewsvg-edit">Edit modes</a> later in this guide.</div>
<div class="table-divider"></div>
<div class="row-icon"><span class="icon icon-download"></span></div>
<div class="row-description">When viewing a diagram outside of edit modes the PDF and PNG download links will be available. These links will download to your device the latest version of the diagram in either the PDF or PNG format directly from <a href="https://github.com/AaronDinnage/Licensing/" target="_blank">GitHub</a>. Whilst m365maps.com works fully offline, downloading is only available when you have an active internet connection.</div>
<div class="table-divider"></div>
<div class="row-icon"><span class="icon icon-export"></span></div>
<div class="row-description">When working in edit modes SVG and PNG export links will be available (varies by browser compatibility). These links export the version of the diagram you are working on, with your changes included, and downloads it to your device. The PNG export includes your current theme background colour. Exporting can be performed while your internet connection is offline.</div>
<div class="table-divider"></div>
</div>
<h2 id="viewsvg-edit"><a href="#viewsvg-edit" class="header-link">View diagram - Edit modes</a></h2>
<div class="mockup-container">
<div class="menu-mockup">
<span class="icon icon-close" title="Close menu"></span>
<span class="icon icon-back" title="Back"></span>
<span class="icon icon-unflagged" title="Flag this diagram"></span>
<span class="icon icon-save" title="Save a copy"></span>
<span class="icon icon-controls" title="Controls"></span>
<span class="icon icon-edit active" title="Edit modes"></span>
<span class="icon icon-download" title="Download PDF">PDF</span>
<span class="icon icon-download" title="Download PNG">PNG</span>
</div>
<div id="edit-controls-mockup">
<button type="button" id="menu-highlight">Highlight</button>
<button type="button" id="menu-draw">Draw</button>
<button type="button" id="menu-text">Text</button>
<button type="button" id="menu-image">Image</button>
<button type="button" id="menu-link">Link</button>
<button type="button" id="menu-notes">Notes</button>
</div>
</div>
<p>There are six different edit modes available to help you customise visualisations to communicate licensing details and opportunities to your colleagues or customers, or just for your own reference. Clicking the edit icon on the main menu will expand or collapse the edit modes menu shown above.</p>
<div class="table-icon-description">
<span class="header-icon">Icon</span>
<span class="header-description">Description</span>
<div class="table-divider"></div>
<div class="row-icon"><span class="icon icon-highlight"></span></div>
<div class="row-description">With Highlight mode enabled your mouse clicks will no longer open the tile links but instead will highlight elements within the diagram. Your first click will apply the highlight colour, click again on the same tile and it will remove the highlight. Hold <strong>Shift + Click</strong> and your first alternate colour will be applied. Hold <strong>Ctrl + Click</strong> and your second alternate colour will be applied. And holding <strong>Shift + Ctrl + Click</strong> will apply your third alternate colour. You can customise your highlight colours on the <a href="#settings">Settings</a> page.</div>
<div class="table-divider"></div>
<div class="row-icon"><span class="icon icon-draw"></span></div>
<div class="row-description">Draw mode applies free hand drawings (mouse, touch, and pen compatible) on top of a diagram. <strong>Ctrl + Click</strong> to draw straight lines. <strong>Shift + Click</strong> to automatically close the drawing shape. Click a drawing to cycle through colours. Right-click a drawing to remove it. You can also Click + Drag to move an existing drawing item within the page.</div>
<div class="table-divider"></div>
<div class="row-icon"><span class="icon icon-text"></span></div>
<div class="row-description">Text mode allows you to add your own text labels on top of a diagram. Click anywhere in the page and you will be prompted for text and given the chance to choose a colour for the text. Hold <strong>Shift + Click</strong> and Drag to rotate (<strong>Shift + Click</strong> without dragging to step the text at 90 degree increments of rotation). Hold <strong>Ctrl + Click</strong> and Drag to resize your text (<strong>Ctrl + Click</strong> without dragging will reset the text to its original size). Click any text you've added to modify the wording or change the colour. Right-click text to remove it.</div>
<div class="table-divider"></div>
<div class="row-icon"><span class="icon icon-image"></span></div>
<div class="row-description">Image mode allows for the insertion of pictures, diagrams, and images into the diagram you are editing. With Image mode enabled click anywhere inside the diagram and you will prompted to either select from the built in range of common diagram annotations or upload an image from your computer. The built-in images are fast and pre-formatted to fit well with the diagrams. Further, the built-in images all scale without quality loss. When uploading an image from your computer you may use any JPEG, PNG, or SVG file. This means you could embed a logo, picture, or even a diagram you had downloaded from m365maps.com, into the diagram. Hold <strong>Shift + Click</strong> and Drag to rotate (<strong>Shift + Click</strong> without dragging to step the image at 90 degree increments of rotation). Hold <strong>Ctrl + Click</strong> and Drag to resize your image (<strong>Ctrl + Click</strong> without dragging will reset the image to its original size).</div>
<div class="table-divider"></div>
<div class="row-icon"><span class="icon icon-link"></span></div>
<div class="row-description">Link mode lets you add a hyperlink to any image, text, or drawing that you've added to a diagram, and can also modify or remove links from existing diagram feature tiles. When in Link mode you can click on a diagram element and you will be prompted to add, modify, or remove the hyperlink for that element. This can be useful for linking to your own project status reports, intranet pages, or preferred online documentation.</div>
<div class="table-divider"></div>
<div class="row-icon"><span class="icon icon-notes"></span></div>
<div class="row-description">Notes mode gives you a way to add your own text notes to any element of a diagram. Notes then show up when you hover your cursor above that element in a classic 'tooltip' format. To add a note simply click the element you wish to annotate and then add or update the note in the prompt that displays. This can be useful for adding pricing or project planning notes to the diagrams without adding visual clutter.</div>
<div class="table-divider"></div>
</div>
<p class="tip"><strong>Tip: </strong>Whilst in the Highlight, Draw, Text, or Image edit mode you can Left-click and Drag to enable the mode-specific eraser (<span class="icon icon-erase"></span>). Dragging the eraser over an item of that mode will erase that item. For example, whilst in Highlight mode if you Left-click and Drag you will erase any highlight you pass your cursor over.</p>
<img src="/media/edit-modes.png" class="screenshot" width="600" height="400" alt="Diagram editing screenshot" />
<p>Your edits can be stored by clicking the save icon (<span class="icon icon-save"></span>) and then providing a name for your diagram. Diagrams you've saved are accessible from the <a href="#saved">Saved diagrams</a> and <a href="#compare">Compare diagrams</a> pages.</p>
<h2 id="controls"><a href="#controls" class="header-link">View diagram - Image controls</a></h2>
<img src="/media/image-controls.png" class="screenshot" width="600" height="400" alt="Image controls screenshot" />
<p>The image controls menu allows you to control the brightness, contrast, hue, and saturation of the diagram you are viewing.</p>
<p>The Reset button (<span class="icon icon-defaults"></span>) reverts all image controls to their default values.</p>
<p>The Save button (<span class="icon icon-save"></span>) commits the current image control levels to memory and uses them on all diagrams from that point on.</p>
<p class="tip"><strong>Tip: </strong>If you've saved a set of image controls and would no longer like them to apply, click Reset and then Save.</p>
<div class="section-links">
<a href="#top" class="top-link">Page top</a>
—
<a href="#viewsvg" class="section-link">Section top</a>
</div>
<h2 id="compare"><a href="#compare" class="header-link">Compare diagrams</a></h2>
<img src="/media/page-compare.png" class="screenshot" width="600" height="400" alt="Compare diagrams screenshot" />
<p>The <a href="/compare.htm">Compare diagrams</a> page lists all the included diagrams and any saved diagrams, allowing you to compare a combination of two diagrams side-by-side. Simply select the two diagrams for comparison and then click the Compare button at the bottom of the page.</p>
<img src="/media/page-comparing.png" class="screenshot" width="600" height="400" alt="Comparing diagrams screenshot" />
<p>After clicking compare you will be taken to a modified view page with a slider at the bottom to drag between the two diagrams you selected. Zooming and Click-to-Drag moving features still function, but no edit menu features are available from the comparison page. </p>
<div class="section-links">
<a href="#top" class="top-link">Page top</a>
—
<a href="#compare" class="section-link">Section top</a>
</div>
<h2 id="matrix"><a href="#matrix" class="header-link">Feature matrix</a></h2>
<img src="/media/page-matrix.png" class="screenshot" width="600" height="400" alt="Feature matrix screenshot" />
<p>The <a href="/matrix.htm">Feature matrix</a> page lists all the features from the license diagrams in a table layout, allowing you to compare a combination of license types side-by-side.</p>
<p>Select license types to compare with the checkboxes at the top of the page and filter the feature list by typing into the search box.</p>
<p>When selecting license types using the checkboxes the feature list automatically filters to show only the features relevant to your selection.</p>
<p>When searching for features using the search box, all features that match your text will be shown even if they are not part of any of your selected license types.</p>
<p class="tip"><strong>Tip: </strong>The page address is updated with each change of license type checkbox selection, allowing you to bookmark the selection in your browser.</p>
<p class="tip"><strong>Tip: </strong>An Excel version of the Feature Matrix is available on the <a href="/downloads.htm#other">Downloads</a> page.</p>
<div class="section-links">
<a href="#top" class="top-link">Page top</a>
—
<a href="#matrix" class="section-link">Section top</a>
</div>
<h2 id="saved"><a href="#saved" class="header-link">Saved diagrams</a></h2>
<img src="/media/page-saved.png" class="screenshot" width="600" height="248" alt="Saved diagrams screenshot" />
<p>The <a href="/saved.htm">Saved diagrams</a> page provides a list of all the diagrams that you have saved from the <a href="#viewsvg">View diagram</a> page, sorted in the order you saved them.</p>
<p>Clicking on the saved diagram name will take you to the <a href="#viewsvg">View diagram</a> page. From there you can review your edits, make new edits (including removing existing highlights), and save over or create a new copy of the diagram.</p>
<p>A number of actions are available against each saved diagram from this page as follows:</p>
<div class="table-icon-description">
<span class="header-icon">Icon</span>
<span class="header-description">Description</span>
<div class="table-divider"></div>
<div class="row-icon"><span class="icon icon-rename"></span></div>
<div class="row-description">Clicking this icon allows you to rename a saved diagram. When clicked a dialog will appear prompting you for a new name.</div>
<div class="table-divider"></div>
<div class="row-icon"><span class="icon icon-delete"></span></div>
<div class="row-description">Clicking this icon will delete the saved diagram.</div>
<div class="table-divider"></div>
<div class="row-icon"><span class="icon icon-export"></span></div>
<div class="row-description">These links export your saved diagrams to SVG or PNG files for download to your device (availability varies by browser compatibility). The PNG export includes your current theme background colour. Exporting can be performed while offline.</div>
<div class="table-divider"></div>
</div>
<div class="spacer"></div>
<p class="tip"><strong>Tip: </strong>PDF exporting is not available on <a href="https://m365maps.com/" target="_blank">m365maps.com</a> but many devices now support "Print to PDF". The menu and offline/online indicators will be hidden in print outs, printing only the diagram.</p>
<p>There are three buttons at the bottom of the saved diagrams page:</p>
<ul class="no-bullet-list">
<li><span class="icon icon-export"></span> <strong>Export all (PNG)</strong> - Downloads all the saved diagrams as PNG files.</li>
<li><span class="icon icon-export"></span> <strong>Export all (SVG)</strong> - Downloads all the saved diagrams as SVG files.</li>
<li><span class="icon icon-import"></span> <strong>Import SVG</strong> - Imports an SVG file from your device and adds it to the saved diagrams list so that you can display and edit it within <a href="https://m365maps.com/" target="_blank">m365maps.com</a>.</li>
</ul>
<div class="spacer"></div>
<p class="tip"><strong>Tip: </strong>Saved diagrams are stored by your browser and can be easily lost, so it's a good idea to export important diagrams every once in a while. That way you can import them back in if you need to.</p>
<p>This page has a <a href="#home">Home page</a> link in the top-right corner.</p>
<p>The menu actions available when viewing a saved diagram are slightly reduced from the normal <a href="#viewsvg">view diagram</a> experience. Diagram flagging is not available for saved diagrams.</p>
<div class="section-links">
<a href="#top" class="top-link">Page top</a>
—
<a href="#saved" class="section-link">Section top</a>
</div>
<h2 id="settings"><a href="#settings" class="header-link">Settings</a></h2>
<img src="/media/page-settings.png" class="screenshot" width="600" height="248" alt="Settings page screenshot" />
<p>The <a href="/settings.htm">Settings page</a> allows you to customise some of the web site features to your preference.</p>
<div class="table-icon-description">
<span class="header-icon">Setting</span>
<span class="header-description">Description</span>
<div class="table-divider"></div>
<div class="row-setting"><span class="icon icon-highlight"></span> Highlights</div>
<div class="row-description">Customise your highlight colours for use in highlight edit mode on the <a href="#viewsvg">View diagram</a> page. A standard <strong>Left-Click</strong> will use the first colour, <strong>Shift + Click</strong> uses the second colour, <strong>Ctrl + Click</strong> will use the third colour, and <strong>Ctrl + Shift + Click</strong> will use the fourth colour from this setting. Default colours are pictured in the screenshot above.</div>
<div class="table-divider"></div>
<div class="row-setting"><span class="icon icon-close"></span> Menu</div>
<div class="row-description">This setting controls the default position of the menu on the <a href="#viewsvg">View diagram</a> page. The options are "Open" (default) or "Closed".</div>
<div class="table-divider"></div>
<div class="row-setting"><span class="icon icon-theme"></span> Theme</div>
<div class="row-description">Set the site theme from here. Options include "Light" (default), "Dark", and "System". The "System" setting will dynamically change the site theme based on the browser or operating system theme settings on your device. All pages and diagrams inherit the theme throughout <a href="https://m365maps.com/" target="_blank">m365maps.com</a>.</div>
<div class="table-divider"></div>
<div class="row-setting"><span class="icon icon-zoom"></span> Zoom</div>
<div class="row-description">Configure the default image zoom level for the <a href="#viewsvg">View diagram</a> page here. The options are:
<ul>
<li><strong>Fit</strong> (default) - Ensures the diagram fits entirely inside the browser window/screen.</li>
<li><strong>Fit Width</strong> - Makes sure to take up the full width of the browser window/screen. The diagram may scroll off the page vertically if it is taller than the browser window/screen.</li>
<li><strong>Fit Height</strong> - Makes sure to take up the full height of the browser window/screen. The diagram may scroll off the page horizontally if it is wider than the browser window/screen.</li>
<li><strong>Fill</strong> - Makes sure to take up the full width and height of the browser window/screen. The diagram may scroll off the page horizontally or vertically depending on the shape of the diagram.</li>
</ul>
Clicking the middle mouse button or scroll wheel on the <a href="#viewsvg">View diagram</a> page will reset the diagram zoom to whatever setting you have defined here.
</div>
<div class="table-divider"></div>
</div>
<div class="spacer"></div>
<p>There are three buttons at the bottom of the settings page:</p>
<ul class="no-bullet-list">
<li><span class="icon icon-defaults"></span> <strong>Default</strong> - Resets all settings to the site defaults, but doesn't commit the settings reset until you click Save.</li>
<li><span class="icon icon-save"></span> <strong>Save</strong> - Saves your changes and returns to the <a href="#home">Home page</a>.</li>
<li><span class="icon icon-delete"></span> <strong>Cancel</strong> - Cancels any changes you may have made and returns to the <a href="#home">Home page</a>.</li>
</ul>
<p>This page has a <a href="#home">Home page</a> link in the top-right corner.</p>
<div class="section-links">
<a href="#top" class="top-link">Page top</a>
—
<a href="#settings" class="section-link">Section top</a>
</div>
<h2 id="teams"><a href="#teams" class="header-link">M365 Maps for Teams</a></h2>
<img src="/media/teams-app.png" class="screenshot" width="600" height="400" alt="Teams app screenshot" />
<p>The Microsoft Teams app brings m365maps.com directly into your Teams client as a personal tab app. All the site functions are available directly inside Teams, with some user interface streamlining to make the experience more suited to the Teams interface.</p>
<p>M365 Maps for Teams does not connect with the Teams SDK, so there is no exchange of personal information or user tracking of any kind. I've deliberately kept the app simple to make it easier for organisations to choose to allow the app to run in their environment.</p>
<p>Users can self-install the app using the instructions below, or have an organisation administrator load the app for all users within the Teams tenant to access. Microsoft publishes generic administrator installation instructions are here: <a href="https://docs.microsoft.com/microsoftteams/upload-custom-apps#upload" target="_blank">Link</a></p>
<img src="/media/teams-manage.png" class="screenshot plain-image" width="496" height="208" alt="Teams app manage apps screenshot" />
<p>To add the M365 Maps for Teams app to your own Teams environment, first navigate to the Apps side tab and select "Manage your apps" from the bottom of the store panel, as pictured above.</p>
<img src="/media/teams-upload.png" class="screenshot plain-image" width="600" height="234" alt="Teams app upload screenshot" />
<p>You can then choose to either add the app to your own environment, or submit it for inclusion in your orginizations app list. For these instructions we will focus on uploading for your own personal use, to do so select "Upload a customised app", as pictured above.</p>
<p>After selecting the <a href="/teams/M365-Maps-for-Teams.zip" download="M365 Maps for Teams.zip">M365 Maps for Teams.zip</a> you will be presented with further information on the app and be able to add it to Teams.</p>
<img src="/media/teams-add.png" class="screenshot" width="600" height="400" alt="Add a Teams app screenshot" />
<p>The Add App process will provide app and publisher details, as well as required app permissions. Please note: Whilst Teams will advise that the app has access to receive messages and data you provide it, M365 Maps will not ask for data or interact with messages. Also, the permissions set will advise that M365 Maps will have access to your profile information, M365 Maps will not access this information as the app does not utilise the Teams SDK or APIs. This can all be independantly verified by examining the open source code for m365maps.com and M365 Maps for Teams on <a href="https://github.com/AaronDinnage/Licensing/" target="_blank">GitHub</a>.</p>
<img src="/media/teams-pin.png" class="screenshot" width="496" height="360" alt="Pin a Teams app screenshot" />
<p>After uploading the M365 Maps for Teams app you you will be taken to the app. If you want to keep quick access to M365 Maps you can pin the app by opening the left-click context menu and selecting "Pin".</p>
<div class="section-links">
<a href="#top" class="top-link">Page top</a>
—
<a href="#teams" class="section-link">Section top</a>
</div>
<h2 id="browsers"><a href="#browsers" class="header-link">Browser compatibility</a></h2>
<p><a href="https://m365maps.com/" target="_blank">m365maps.com</a> targets the same mainstream web browsers that Microsoft 365 supports: Edge, Firefox, Safari, and Chrome.</p>
<p>Internet Explorer, out of date builds of mainstream browsers, and any other niche browsers are not targeted for compatibility or tested. Your experience may vary.</p>
<p>If you have a particular device or browser scenario you'd like me to try to support then please <a href="#contact">contact me</a> to discuss.</p>
<h3>Known issues</h3>
<ul>
<li><strong>Apple iOS (iPhone / iPad)</strong>
<p>You can only install a Progressive Web App ("Add to Home Screen") from the Apple Safari browser and not from a third party browser like Edge or Chrome.</p>
<p>Multiple file downloads ("Export all ...") are disabled on iOS for now.</p>
<p>Edge on iOS has the Export SVG and Export PNG actions removed on the <a href="#viewsvg">View diagram</a> and <a href="#saved">Saved diagrams</a> pages. If you need this feature please use Safari for now.</p>
</li>
<li><strong>M365 Maps for Teams</strong>
<p>The M365 Maps for Teams app follows the operating system theme when in the Teams desktop app and the browser theme when in the web browser.</p>
</li>
</ul>
<div class="section-links">
<a href="#top" class="top-link">Page top</a>
—
<a href="#browsers" class="section-link">Section top</a>
</div>
<h2 id="contact"><a href="#contact" class="header-link">Contact</a></h2>
<p><strong>Aaron Dinnage</strong></p>
<ul class="link-list">
<li><a class="twitter" href="https://twitter.com/AaronDinnage" target="_blank">Follow on Twitter</a></li>
<li><a class="linkedin" href="https://www.linkedin.com/in/aarondinnage/" target="_blank">Connect on LinkedIn</a></li>
<!-- <li><a class="etsy" href="https://www.etsy.com/au/shop/m365maps" target="_blank">Visit the M365 Maps store on Etsy</a></li> -->
<!-- <li><a class="vimeo" href="https://vimeo.com/aarondinnage" target="_blank">Watch the videos on Vimeo</a></li> -->
<!-- <li><a class="paypal" href="https://paypal.me/aarondinnage" target="_blank">Make a donation with PayPal</a></li> -->
<li><a class="github" href="https://github.com/AaronDinnage/Licensing/" target="_blank">Source code on GitHub</a></li>
</ul>
<p>If you'd like to provide feedback, report an error / omission, ask a question, or discuss an idea, then please use <a href="https://www.linkedin.com/in/aarondinnage/" target="_blank">LinkedIn</a> or <a href="https://twitter.com/AaronDinnage" target="_blank">Twitter</a> to connect. Licensing can be complicated which often means a conversation is needed to process feedback effectively.</p>
<div class="section-links">
<a href="#top" class="top-link">Page top</a>
—
<a href="#contact" class="section-link">Section top</a>
</div>
<h2 id="privacy"><a href="#privacy" class="header-link">Privacy policy</a></h2>
<p>m365maps.com <strong>does not</strong> request, collect, store, process, or manage <strong>any</strong> personal information.</p>
<p>Use of third party services linked from m365maps.com is subject to the privacy policy and terms of use of those services.</p>
<p>m365maps.com is hosted on GitHub Pages. IP addresses are logged for security purposes as described by <a href="https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages#data-collection" target="_blank">GitHub</a>.</p>
<div class="section-links">
<a href="#top" class="top-link">Page top</a>
—
<a href="#privacy" class="section-link">Section top</a>
</div>
<h2 id="terms"><a href="#terms" class="header-link">Terms of use</a></h2>
<p>Your use of m365maps.com depends on your acceptance of the following terms:</p>
<ul>
<li><a href="https://m365maps.com/" target="_blank" property="dct:title" rel="cc:attributionURL noopener">m365maps.com</a> by <a href="https://twitter.com/AaronDinnage" target="_blank" property="cc:attributionName">Aaron Dinnage</a> is licensed under <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="license noopener noreferrer">Creative Commons BY 4.0</a></li>
<li>m365maps.com is for informational purposes only</li>
<li>m365maps.com does not guarantee accuracy</li>
<li>You accept the m365maps.com <a href="#privacy">privacy policy</a></li>
<li>Microsoft is the only authoritative source of all Microsoft licensing terms and conditions</li>
<li>You must validate all licensing decisions with Microsoft or a Microsoft licensing partner</li>
</ul>
<div class="section-links">
<a href="#top" class="top-link">Page top</a>
—
<a href="#terms" class="section-link">Section top</a>
</div>
<h2 id="references"><a href="#references" class="header-link">References</a></h2>
<p>The information contained within the diagrams on this site is sourced from a variety of references. If you'd like to see where this information comes from I've listed those sources below. Whilst a lot of the modern licensing resources are very good at a high level, it's often the case that some of the finer detail is in the deeper, longer form documentation. I try to capture <em>some</em> of that detail in my diagrams when I think it's particularly relevant.</p>
<h3>Public</h3>
<p>This material is publicly accessible on the internet without the need to sign in.</p>
<ul>
<li>
<strong><a href="https://www.microsoft.com/licensing/terms/productoffering" target="_blank">Product Licensing Terms</a></strong>
<p>Allows you to find product licensing terms by program and product family for Software and Online Services. Knowledge of Microsoft licensing programs is required to navigate the complexity, but answers to questions around feature inclusions can often be found here. These links I've found particularly useful:</p>
<ul>
<li><a href="https://www.microsoft.com/licensing/docs" target="_blank"><strong>Licensing Resources and Documents</strong></a></li>
<li><a href="https://www.microsoft.com/licensing/terms/product/SubscriptionLicenseSuites/all" target="_blank"><strong>Subscription License Suites</strong></a></li>
<li><a href="https://www.microsoft.com/licensing/terms/product/StudentUseBenefitsandAcademicPrograms/all" target="_blank"><strong>Student Use Benefits and Academic Programs</strong></a></li>
<li><a href="https://www.microsoft.com/licensing/terms/product/CALandMLEquivalencyLicenses/all" target="_blank"><strong>CAL and ML Equivalency</strong></a></li>
<li><a href="https://www.microsoft.com/licensing/terms/product/changes/all" target="_blank"><strong>Summary of Changes</strong></a></li>
</ul>
</li>
<li>
<strong><a href="https://docs.microsoft.com/office365/servicedescriptions/office-365-service-descriptions-technet-library" target="_blank">Service Descriptions</a></strong>
<p>This is a great collection of feature-level detail that describes what's available and what the services can do. These links in particular are regular go-to resources for me.</p>
<ul>
<li><a href="https://docs.microsoft.com/office365/servicedescriptions/office-365-platform-service-description/office-365-platform-service-description" target="_blank"><strong>Plan feature inclusions</strong></a></li>
<li><a href="https://docs.microsoft.com/office365/servicedescriptions/microsoft-365-service-descriptions/microsoft-365-tenantlevel-services-licensing-guidance/microsoft-365-security-compliance-licensing-guidance" target="_blank"><strong>Security and Compliance Licensing Guidance</strong></a></li>
<li><a href="https://docs.microsoft.com/azure/active-directory/enterprise-users/licensing-service-plan-reference" target="_blank"><strong>Product names and service plan identifiers</strong></a></li>
<li><a href="https://docs.microsoft.com/office365/servicedescriptions/microsoft-365-service-descriptions/licensing-microsoft-365-in-smb" target="_blank"><strong>Microsoft 365 Business</strong></a></li>
<li><a href="https://docs.microsoft.com/office365/servicedescriptions/office-365-platform-service-description/microsoft-365-education" target="_blank"><strong>Microsoft 365 Education</strong></a></li>
</ul>
</li>
<li>
<strong><a href="https://azure.microsoft.com/pricing/" target="_blank">Azure Pricing</a></strong>
<p>Microsoft 365 licenses a number of Azure services, so getting information on them often means visiting these Azure pages:</p>
<ul>
<li><a href="https://azure.microsoft.com/pricing/details/active-directory/" target="_blank"><strong>Azure Active Directory</strong></a></li>
<li><a href="https://azure.microsoft.com/pricing/details/active-directory/external-identities/" target="_blank"><strong>Azure Active Directory External Identities</strong></a></li>
<li><a href="https://azure.microsoft.com/pricing/details/information-protection/" target="_blank"><strong>Azure Information Protection</strong></a></li>
</ul>
</li>
<li>
<strong>Power Platform</strong>
<ul>
<li><strong><a href="https://go.microsoft.com/fwlink/?linkid=2085130" target="_blank">Guide</a></strong></li>
<li><strong><a href="https://docs.microsoft.com/power-platform/admin/powerapps-flow-licensing-faq" target="_blank">FAQ</a></strong></li>
</ul>
</li>
<li>
<strong><a href="https://www.microsoft.com/UseTerms" target="_blank">Product Use Terms search</a></strong>
<p>Useful for finding product use terms for packaged software (i.e. Office consumer).</p>
</li>
</ul>
<h3>Partner</h3>
<p>This material is accessible by Microsoft partners and Microsoft staff after signing in.</p>
<ul>
<li>
<strong><a href="https://transform.microsoft.com/modernwork/resources/licensing" target="_blank">Transform / OnRamp</a></strong>
<p>The Modern Work Licensing Resources page contains some excellent presentations, data sheets, and FAQs which summarise a lot of the other resources in one place.</p>
</li>
</ul>
<h3>Microsoft</h3>
<p>This material is accessible only to Microsoft staff after signing in. I won't provide links for these resources, just names, so if you're a Microsoft staff member you'll be able to track them down.</p>
<ul>
<li>
<strong>M365 Ingestion Analytics Power BI</strong>
<p>The definitive resource that shows the relationship between Products, Offers, and Service Plans. It doesn't show specific feature availability within a license, but it does show which license components make up a service plan.</p>
</li>
<li><strong>Microsoft 365 Licensing group on Yammer</strong>
<p>Excellent news and resources, and the opportunity to clarify your understanding.</p>
</li>
<li>
<strong>LicenseQ on SharePoint and Yammer</strong>
<p>To get authoritative answers to licensing questions. The weekly updates are also a handy way to stay across upcoming changes.</p>
</li>
<li>
<strong>Automated Price Tool</strong>
<p>See what SKUs exist on the price list. Full USLs, Step-ups, Add-ons, From SA, etc ... and their month-to-month availability for purchase.</p>
</li>
</ul>
<div class="section-links">
<a href="#top" class="top-link">Page top</a>
—
<a href="#references" class="section-link">Section top</a>
</div>
</body>
</html>