From d712a96fdc86af9f30a9984a63cf1eafd17588a7 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Fri, 17 Mar 2017 16:22:50 -0700
Subject: [PATCH] [Styleguide] Diagrams and intro content updated

Fixes #1233
---
 example/styleguide/res/images/diagram-objects.svg | 2 +-
 example/styleguide/res/images/diagram-views.svg   | 1 +
 example/styleguide/res/templates/intro.html       | 4 ++--
 3 files changed, 4 insertions(+), 3 deletions(-)
 create mode 100644 example/styleguide/res/images/diagram-views.svg

diff --git a/example/styleguide/res/images/diagram-objects.svg b/example/styleguide/res/images/diagram-objects.svg
index c62a2fc3a7..c457666dcf 100644
--- a/example/styleguide/res/images/diagram-objects.svg
+++ b/example/styleguide/res/images/diagram-objects.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 622.47"><defs><style>.a,.d{fill:#fff;}.b,.c,.k,.m,.n,.o{fill:none;}.b{stroke:#000;stroke-linecap:square;}.b,.c,.d,.f,.k,.m,.n,.o{stroke-miterlimit:10;}.b,.k{stroke-width:2px;}.c{stroke:#ababab;stroke-dasharray:5;}.d,.k,.o{stroke:#737373;}.e{opacity:0.5;fill:url(#a);}.f{fill:#d6d6d6;fill-opacity:0.8;stroke:#fff;}.g{mask:url(#b);}.h{fill:#a8a8a8;}.i{fill:#00b1e2;}.j{fill:#f16e86;}.k{stroke-linecap:round;}.l{mask:url(#c);}.m{stroke:#00b1e2;}.m,.n{stroke-width:10px;}.n{stroke:#f16e86;}</style><linearGradient id="a" x1="523.15" y1="-401.02" x2="513.75" y2="-437.16" gradientTransform="translate(90.62 338.26) rotate(45)" gradientUnits="userSpaceOnUse"><stop offset="0"/><stop offset="1" stop-opacity="0"/></linearGradient><mask id="b" x="-1187.45" y="-269.68" width="1813.84" height="554.26" maskUnits="userSpaceOnUse"><polygon class="a" points="625.33 284.58 452.55 238.2 452.55 170.5 625.33 216.88 625.33 284.58"/><line class="b" x1="486.25" y1="179.55" x2="486.25" y2="247.32"/><line class="b" x1="573.58" y1="202.99" x2="573.58" y2="270.76"/><line class="b" x1="452.46" y1="192.89" x2="625.16" y2="239.25"/><line class="b" x1="452.46" y1="215.48" x2="625.16" y2="261.83"/></mask><mask id="c" x="-1468.9" y="-163.59" width="1866.4" height="673.87" maskUnits="userSpaceOnUse"><polygon class="a" points="344.11 510.28 171.1 462.49 171.1 289.49 344.11 337.28 344.11 510.28"/></mask></defs><title>objects-diagram</title><polyline class="c" points="460.63 153.71 480.14 142.45 513.15 123.39"/><polyline class="c" points="312.69 239.13 336.82 225.2 365.42 208.68"/><polygon class="d" points="742.15 65.53 519.88 5.97 519.88 368.97 742.15 428.53 742.15 65.53"/><polygon class="e" points="742.15 428.53 742.15 377.47 786.44 403 742.15 428.53"/><polyline class="c" points="619.05 308.21 626.95 303.65 636.44 298.17"/><polygon class="f" points="637.26 156.11 443.71 104.25 443.71 402.92 637.26 454.78 637.26 156.11"/><g class="g"><polygon class="h" points="625.33 239.44 452.55 193.07 452.55 170.5 625.33 216.88 625.33 239.44"/><polygon class="i" points="625.33 262.01 452.55 215.64 452.55 193.07 625.33 239.44 625.33 262.01"/><polygon class="j" points="625.33 284.58 452.55 238.2 452.55 215.64 625.33 262.01 625.33 284.58"/></g><polyline class="c" points="467.58 395.66 481.45 387.65 490.54 382.4"/><polygon class="f" points="490.33 240.94 296.78 189.08 296.78 487.75 490.33 539.62 490.33 240.94"/><polygon class="h" points="386.94 387.36 314 367.78 314 238.33 386.94 257.91 386.94 387.36"/><line class="k" x1="402.02" y1="280.97" x2="355.33" y2="284.32"/><line class="k" x1="401.71" y1="316.74" x2="355.33" y2="291.74"/><polygon class="i" points="473.63 301.9 400.69 282.32 400.69 261.6 473.63 281.18 473.63 301.9"/><polygon class="j" points="473.63 337.63 400.69 318.05 400.69 297.32 473.63 316.9 473.63 337.63"/><polyline class="c" points="331.67 474.13 343.85 467.1 356.86 459.58"/><polyline class="c" points="183.35 313.8 207.44 299.89 231.58 285.96"/><polygon class="c" points="710.61 148.05 546.55 104.09 546.55 144.26 710.61 188.22 710.61 148.05"/><polygon class="c" points="710.61 215.05 546.55 171.09 546.55 211.26 710.61 255.22 710.61 215.05"/><line class="c" x1="162.68" y1="266.5" x2="533" y2="52.7"/><line class="c" x1="356.23" y1="617.04" x2="726.54" y2="403.24"/><polygon class="f" points="356.23 318.36 162.68 266.5 162.68 565.18 356.23 617.04 356.23 318.36"/><g class="l"><path class="m" d="M165.1,350.83c12-19.68,24-57.37,47,7s29,42,46,35.71,27,34.46,50,51.81,75,16.72,89,15.59"/><path class="n" d="M349.1,427.78c-9.13-13.05-13.7-31.26-31.2-9.54s-22.07,9.47-35,.86-20.55,6.69-38.05,6.89-67.08-25.38-77.73-30.61"/></g><polygon class="i" points="211.4 436.27 47.34 392.31 47.34 432.48 211.4 476.44 211.4 436.27"/><polygon class="o" points="211.4 436.27 47.34 392.31 47.34 432.48 211.4 476.44 211.4 436.27"/><polygon class="j" points="211.4 503.27 47.34 459.31 47.34 499.48 211.4 543.44 211.4 503.27"/><polygon class="o" points="211.4 503.27 47.34 459.31 47.34 499.48 211.4 543.44 211.4 503.27"/><line class="c" x1="513.15" y1="123.39" x2="544.97" y2="105.02"/><line class="c" x1="365.42" y1="208.68" x2="460.63" y2="153.71"/><line class="c" x1="231.58" y1="285.96" x2="312.69" y2="239.13"/><line class="c" x1="48.79" y1="391.49" x2="183.35" y2="313.8"/><line class="c" x1="636.44" y1="298.17" x2="709.92" y2="255.75"/><line class="c" x1="490.54" y1="382.4" x2="619.05" y2="308.21"/><line class="c" x1="356.86" y1="459.58" x2="467.58" y2="395.66"/><line class="c" x1="212.34" y1="543.03" x2="331.67" y2="474.13"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 719 622.47"><defs><style>.a{fill:#fff;}.b,.h{fill:none;stroke-miterlimit:10;}.b{stroke:#737373;}.c,.d{opacity:0.99;}.d,.e,.j,.k,.n{fill:#00b1e2;}.e{font-size:14px;}.e,.j,.n{font-family:HelveticaNeue, Helvetica Neue;}.f{letter-spacing:-0.11em;}.g{fill:#d6d6d6;}.h{stroke:#ababab;stroke-dasharray:5;}.i{opacity:0.5;fill:url(#a);}.j{font-size:14.33px;}.l{fill:#f0f0f0;}.m{opacity:0.8;}.n{font-size:15.44px;}.o{letter-spacing:-0.11em;}</style><linearGradient id="a" x1="547.24" y1="-217.84" x2="537.62" y2="-254.83" gradientTransform="translate(127.72 377.65) rotate(45)" gradientUnits="userSpaceOnUse"><stop offset="0"/><stop offset="1" stop-opacity="0"/></linearGradient><symbol id="b" viewBox="0 0 331 81"><rect class="a" x="0.5" y="0.5" width="330" height="80" rx="5" ry="5"/><rect class="b" x="0.5" y="0.5" width="330" height="80" rx="5" ry="5"/><g class="c"><path class="d" d="M12.91,10.08a3.66,3.66,0,0,1,2.85,1.69,12.49,12.49,0,0,1,1.59,3c.75,1.92,1.54,2.74,1.82,2.85.28-.11,1.06-.93,1.82-2.85s1.94-4,3.69-4.54a10,10,0,0,0-18.44,7,1.38,1.38,0,0,0,.43.36c.28-.11,1.06-.93,1.82-2.85C9.3,12.6,10.74,10.08,12.91,10.08Z"/><path class="d" d="M25.84,13.26a1.38,1.38,0,0,0-.43-.36c-.28.11-1.06.93-1.82,2.85-.83,2.12-2.27,4.64-4.43,4.64a3.66,3.66,0,0,1-2.85-1.69,12.5,12.5,0,0,1-1.59-3C14,13.83,13.18,13,12.91,12.9c-.28.11-1.06.93-1.82,2.85s-1.94,4-3.69,4.54a10,10,0,0,0,18.44-7Z"/></g><text class="e" transform="translate(30.83 20.56)"><tspan class="f">T</tspan><tspan x="6.48" y="0">elemetry Element</tspan></text><rect class="g" x="31.05" y="30.75" width="289.31" height="38.35"/></symbol></defs><title>diagram-objects</title><line class="h" x1="6.31" y1="161.24" x2="77.48" y2="120.15"/><polygon class="i" points="666.72 614.57 666.72 562.32 712.05 588.44 666.72 614.57"/><path class="a" d="M669.11,167.18a6.89,6.89,0,0,0-4.83-6.29L76.15,3.29A3.65,3.65,0,0,0,71.32,7V450.34a6.89,6.89,0,0,0,4.83,6.29L664.28,614.23a3.65,3.65,0,0,0,4.83-3.71Z"/><path class="b" d="M669.11,167.18a6.89,6.89,0,0,0-4.83-6.29L76.15,3.29A3.65,3.65,0,0,0,71.32,7V450.34a6.89,6.89,0,0,0,4.83,6.29L664.28,614.23a3.65,3.65,0,0,0,4.83-3.71Z"/><text class="j" transform="matrix(1, 0.27, 0, 1, 103.5, 35.75)">Display Layout</text><path class="k" d="M87.84,15.66,82.72,14.3a2.86,2.86,0,0,0-3.84,2.82V29.91a5.37,5.37,0,0,0,3.84,4.86l5.12,1.36Z"/><path class="k" d="M95.52,17.71,90.4,16.34V27.89l9,2.38V22.57A5.37,5.37,0,0,0,95.52,17.71Z"/><path class="k" d="M90.4,36.81l5.12,1.36a2.86,2.86,0,0,0,3.84-2.82V32.77l-9-2.38Z"/><path class="l" d="M277,169a3.66,3.66,0,0,1-4.83,3.71L83.32,122.46a6.88,6.88,0,0,1-4.83-6.29V49a3.66,3.66,0,0,1,4.83-3.71l188.9,50.29a6.88,6.88,0,0,1,4.83,6.29Z"/><path class="l" d="M277,462.27a3.66,3.66,0,0,1-4.83,3.71L83.32,415.7a6.88,6.88,0,0,1-4.83-6.29V134.92a3.66,3.66,0,0,1,4.83-3.71l188.9,50.29a6.88,6.88,0,0,1,4.83,6.29Z"/><path class="l" d="M658.73,565a3.66,3.66,0,0,1-4.83,3.71L288.5,471.4a6.88,6.88,0,0,1-4.83-6.29V103.58a3.66,3.66,0,0,1,4.83-3.71l365.4,97.27a6.88,6.88,0,0,1,4.83,6.29Z"/><g class="m"><path class="a" d="M585,605.89a3.66,3.66,0,0,1-4.83,3.71l-365.4-97.27A6.88,6.88,0,0,1,210,506V144.51a3.66,3.66,0,0,1,4.83-3.71l365.4,97.27a6.88,6.88,0,0,1,4.83,6.29Z"/><path class="b" d="M585,605.89a3.66,3.66,0,0,1-4.83,3.71l-365.4-97.27A6.88,6.88,0,0,1,210,506V144.51a3.66,3.66,0,0,1,4.83-3.71l365.4,97.27a6.88,6.88,0,0,1,4.83,6.29Z"/><text class="n" transform="matrix(1, 0.27, 0, 1, 243.44, 171.65)">Plot</text><g class="c"><path class="d" d="M234.06,152.09l-13.7-3.65a3.11,3.11,0,0,0-4.18,3.07v8.77a3.17,3.17,0,0,0,.69.85c.31,0,1.17-.71,2-2.61.91-2.09,2.51-4.45,4.89-3.82a5.74,5.74,0,0,1,3.14,2.7,18.93,18.93,0,0,1,1.75,3.72,9,9,0,0,0,2,3.68c.31,0,1.17-.71,2-2.61.91-2.09,2.51-4.46,4.89-3.82a3.6,3.6,0,0,1,.69.26v-1.24A5.85,5.85,0,0,0,234.06,152.09Z"/><path class="d" d="M237.55,161.47c-.31,0-1.17.71-2,2.61-.91,2.09-2.51,4.45-4.89,3.82a5.74,5.74,0,0,1-3.14-2.7,18.93,18.93,0,0,1-1.75-3.72,9,9,0,0,0-2-3.68c-.31,0-1.17.71-2,2.61-.91,2.09-2.51,4.46-4.89,3.82a3.6,3.6,0,0,1-.69-.26v1.24a5.85,5.85,0,0,0,4.18,5.29l13.7,3.65a3.11,3.11,0,0,0,4.18-3.07v-8.77A3.17,3.17,0,0,0,237.55,161.47Z"/></g></g><path class="l" d="M580.08,356a3.66,3.66,0,0,1-4.83,3.71L220.89,265.41a6.88,6.88,0,0,1-4.83-6.29V180.88a3.66,3.66,0,0,1,4.83-3.71L575.25,271.5a6.88,6.88,0,0,1,4.83,6.29Z"/><path class="l" d="M580.08,451a3.66,3.66,0,0,1-4.83,3.71L220.89,360.39a6.88,6.88,0,0,1-4.83-6.29V275.86a3.66,3.66,0,0,1,4.83-3.71l354.37,94.34a6.88,6.88,0,0,1,4.83,6.29Z"/><path class="l" d="M580.08,545.88a3.66,3.66,0,0,1-4.83,3.71L220.89,455.26a6.88,6.88,0,0,1-4.83-6.29V370.73a3.66,3.66,0,0,1,4.83-3.71l354.37,94.34a6.88,6.88,0,0,1,4.83,6.29Z"/><line class="h" x1="6.33" y1="86.4" x2="77.26" y2="45.45"/><line class="h" x1="6.11" y1="172.56" x2="78.79" y2="130.6"/><line class="h" x1="6.19" y1="454.54" x2="77.48" y2="413.39"/><line class="h" x1="209.99" y1="511.05" x2="282.66" y2="469.09"/><line class="h" x1="203.37" y1="508.2" x2="276.04" y2="466.25"/><line class="h" x1="584.06" y1="609.92" x2="656.73" y2="567.96"/><line class="h" x1="483" y1="604.78" x2="578.08" y2="549.88"/><line class="h" x1="485" y1="327.43" x2="580.08" y2="272.53"/><line class="h" x1="482.47" y1="415.64" x2="577.55" y2="360.75"/><line class="h" x1="485" y1="422.66" x2="580.08" y2="367.77"/><line class="h" x1="483" y1="509.91" x2="578.08" y2="455.02"/><line class="h" x1="485" y1="517.53" x2="580.08" y2="462.63"/><g class="m"><path class="a" d="M203.37,210a3.66,3.66,0,0,1-4.83,3.71L9.64,163.4a6.88,6.88,0,0,1-4.83-6.29V89.89a3.66,3.66,0,0,1,4.83-3.71l188.9,50.29a6.88,6.88,0,0,1,4.83,6.29Z"/><path class="b" d="M203.37,210a3.66,3.66,0,0,1-4.83,3.71L9.64,163.4a6.88,6.88,0,0,1-4.83-6.29V89.89a3.66,3.66,0,0,1,4.83-3.71l188.9,50.29a6.88,6.88,0,0,1,4.83,6.29Z"/><polygon class="g" points="184.11 196.32 44.52 159.16 44.52 136.18 184.11 173.34 184.11 196.32"/><text class="n" transform="matrix(1, 0.27, 0, 1, 38.26, 115.93)">Clock</text><path class="d" d="M21.94,94.68c-6.09-1.62-11,2-11,8.09s4.94,12.35,11,14,11-2,11-8.09S28,96.3,21.94,94.68Zm5.82,16.41a1.19,1.19,0,0,1-1.34.42,2,2,0,0,1-.78-.41l-4.78-4h0l-.05,0,0,0,0,0,0,0,0,0,0,0v0l0-.05h0a2.25,2.25,0,0,1-.28-.42l0,0,0,0a2,2,0,0,1-.15-.45h0v-.33h0V97.67a1.15,1.15,0,0,1,1.55-1.14,2.17,2.17,0,0,1,1.55,2v6.95l4,3.38A1.81,1.81,0,0,1,27.76,111.09Z"/></g><g class="m"><path class="a" d="M203.37,503.2a3.66,3.66,0,0,1-4.83,3.71L9.64,456.63a6.88,6.88,0,0,1-4.83-6.29V175.85a3.66,3.66,0,0,1,4.83-3.71l188.9,50.29a6.88,6.88,0,0,1,4.83,6.29Z"/><path class="b" d="M203.37,503.2a3.66,3.66,0,0,1-4.83,3.71L9.64,456.63a6.88,6.88,0,0,1-4.83-6.29V175.85a3.66,3.66,0,0,1,4.83-3.71l188.9,50.29a6.88,6.88,0,0,1,4.83,6.29Z"/><polygon class="g" points="184.11 282.28 44.52 245.12 44.52 222.14 184.11 259.3 184.11 282.28"/><polygon class="g" points="184.11 319.14 44.52 281.98 44.52 259 184.11 296.16 184.11 319.14"/><polygon class="g" points="184.11 356 44.52 318.84 44.52 295.86 184.11 333.02 184.11 356"/><polygon class="g" points="184.11 392.86 44.52 355.7 44.52 332.72 184.11 369.88 184.11 392.86"/><polygon class="g" points="184.11 429.72 44.52 392.56 44.52 369.58 184.11 406.74 184.11 429.72"/><polygon class="g" points="184.11 466.57 44.52 429.42 44.52 406.44 184.11 443.6 184.11 466.57"/><text class="n" transform="matrix(1, 0.27, 0, 1, 38.26, 201.89)"><tspan class="o">T</tspan><tspan x="7.15" y="0">able</tspan></text><path class="d" d="M29.65,183.42l-15.35-3.9a1.93,1.93,0,0,0-2.56,1.91v15.35A3.53,3.53,0,0,0,14.3,200l15.35,3.9A1.93,1.93,0,0,0,32.21,202V186.63A3.53,3.53,0,0,0,29.65,183.42ZM18.14,199.68l-3.84-1a1.72,1.72,0,0,1-.9-.61,1.62,1.62,0,0,1-.38-1v-2.56l5.12,1.3Zm0-5.12L13,193.27v-3.84l5.12,1.3Zm0-5.12L13,188.15v-3.84l5.12,1.3Zm6.4,11.86L19.42,200v-3.84l5.12,1.3Zm0-5.12-5.12-1.3v-3.84l5.12,1.3Zm0-5.12-5.12-1.3v-3.84l5.12,1.3Zm6.4,10.58a1,1,0,0,1-.38.81,1,1,0,0,1-.9.15l-3.84-1V197.8l5.12,1.3Zm0-3.84-5.12-1.3v-3.84l5.12,1.3Zm0-5.12-5.12-1.3v-3.84l5.12,1.3Z"/></g><line class="h" x1="122.45" y1="233.48" x2="217.53" y2="178.59"/><line class="h" x1="585.05" y1="239.36" x2="656.42" y2="199.71"/><line class="h" x1="211.99" y1="141.51" x2="285.67" y2="100.58"/><line class="h" x1="203.37" y1="137.75" x2="275.23" y2="97.83"/><line class="h" x1="122.45" y1="328.46" x2="217.53" y2="273.57"/><line class="h" x1="122.45" y1="423.33" x2="217.53" y2="368.44"/><line class="h" x1="122.26" y1="508.29" x2="215.53" y2="454.45"/><line class="h" x1="121.66" y1="319.03" x2="215.53" y2="264.84"/><line class="h" x1="122.01" y1="413.81" x2="215.53" y2="359.82"/><use width="331" height="81" transform="matrix(1.1, 0.29, 0, 1.1, 119.89, 230.79)" xlink:href="#b"/><use width="331" height="81" transform="matrix(1.1, 0.29, 0, 1.1, 119.89, 325.77)" xlink:href="#b"/><use width="331" height="81" transform="matrix(1.1, 0.29, 0, 1.1, 119.89, 420.63)" xlink:href="#b"/></svg>
\ No newline at end of file
diff --git a/example/styleguide/res/images/diagram-views.svg b/example/styleguide/res/images/diagram-views.svg
new file mode 100644
index 0000000000..c62a2fc3a7
--- /dev/null
+++ b/example/styleguide/res/images/diagram-views.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 622.47"><defs><style>.a,.d{fill:#fff;}.b,.c,.k,.m,.n,.o{fill:none;}.b{stroke:#000;stroke-linecap:square;}.b,.c,.d,.f,.k,.m,.n,.o{stroke-miterlimit:10;}.b,.k{stroke-width:2px;}.c{stroke:#ababab;stroke-dasharray:5;}.d,.k,.o{stroke:#737373;}.e{opacity:0.5;fill:url(#a);}.f{fill:#d6d6d6;fill-opacity:0.8;stroke:#fff;}.g{mask:url(#b);}.h{fill:#a8a8a8;}.i{fill:#00b1e2;}.j{fill:#f16e86;}.k{stroke-linecap:round;}.l{mask:url(#c);}.m{stroke:#00b1e2;}.m,.n{stroke-width:10px;}.n{stroke:#f16e86;}</style><linearGradient id="a" x1="523.15" y1="-401.02" x2="513.75" y2="-437.16" gradientTransform="translate(90.62 338.26) rotate(45)" gradientUnits="userSpaceOnUse"><stop offset="0"/><stop offset="1" stop-opacity="0"/></linearGradient><mask id="b" x="-1187.45" y="-269.68" width="1813.84" height="554.26" maskUnits="userSpaceOnUse"><polygon class="a" points="625.33 284.58 452.55 238.2 452.55 170.5 625.33 216.88 625.33 284.58"/><line class="b" x1="486.25" y1="179.55" x2="486.25" y2="247.32"/><line class="b" x1="573.58" y1="202.99" x2="573.58" y2="270.76"/><line class="b" x1="452.46" y1="192.89" x2="625.16" y2="239.25"/><line class="b" x1="452.46" y1="215.48" x2="625.16" y2="261.83"/></mask><mask id="c" x="-1468.9" y="-163.59" width="1866.4" height="673.87" maskUnits="userSpaceOnUse"><polygon class="a" points="344.11 510.28 171.1 462.49 171.1 289.49 344.11 337.28 344.11 510.28"/></mask></defs><title>objects-diagram</title><polyline class="c" points="460.63 153.71 480.14 142.45 513.15 123.39"/><polyline class="c" points="312.69 239.13 336.82 225.2 365.42 208.68"/><polygon class="d" points="742.15 65.53 519.88 5.97 519.88 368.97 742.15 428.53 742.15 65.53"/><polygon class="e" points="742.15 428.53 742.15 377.47 786.44 403 742.15 428.53"/><polyline class="c" points="619.05 308.21 626.95 303.65 636.44 298.17"/><polygon class="f" points="637.26 156.11 443.71 104.25 443.71 402.92 637.26 454.78 637.26 156.11"/><g class="g"><polygon class="h" points="625.33 239.44 452.55 193.07 452.55 170.5 625.33 216.88 625.33 239.44"/><polygon class="i" points="625.33 262.01 452.55 215.64 452.55 193.07 625.33 239.44 625.33 262.01"/><polygon class="j" points="625.33 284.58 452.55 238.2 452.55 215.64 625.33 262.01 625.33 284.58"/></g><polyline class="c" points="467.58 395.66 481.45 387.65 490.54 382.4"/><polygon class="f" points="490.33 240.94 296.78 189.08 296.78 487.75 490.33 539.62 490.33 240.94"/><polygon class="h" points="386.94 387.36 314 367.78 314 238.33 386.94 257.91 386.94 387.36"/><line class="k" x1="402.02" y1="280.97" x2="355.33" y2="284.32"/><line class="k" x1="401.71" y1="316.74" x2="355.33" y2="291.74"/><polygon class="i" points="473.63 301.9 400.69 282.32 400.69 261.6 473.63 281.18 473.63 301.9"/><polygon class="j" points="473.63 337.63 400.69 318.05 400.69 297.32 473.63 316.9 473.63 337.63"/><polyline class="c" points="331.67 474.13 343.85 467.1 356.86 459.58"/><polyline class="c" points="183.35 313.8 207.44 299.89 231.58 285.96"/><polygon class="c" points="710.61 148.05 546.55 104.09 546.55 144.26 710.61 188.22 710.61 148.05"/><polygon class="c" points="710.61 215.05 546.55 171.09 546.55 211.26 710.61 255.22 710.61 215.05"/><line class="c" x1="162.68" y1="266.5" x2="533" y2="52.7"/><line class="c" x1="356.23" y1="617.04" x2="726.54" y2="403.24"/><polygon class="f" points="356.23 318.36 162.68 266.5 162.68 565.18 356.23 617.04 356.23 318.36"/><g class="l"><path class="m" d="M165.1,350.83c12-19.68,24-57.37,47,7s29,42,46,35.71,27,34.46,50,51.81,75,16.72,89,15.59"/><path class="n" d="M349.1,427.78c-9.13-13.05-13.7-31.26-31.2-9.54s-22.07,9.47-35,.86-20.55,6.69-38.05,6.89-67.08-25.38-77.73-30.61"/></g><polygon class="i" points="211.4 436.27 47.34 392.31 47.34 432.48 211.4 476.44 211.4 436.27"/><polygon class="o" points="211.4 436.27 47.34 392.31 47.34 432.48 211.4 476.44 211.4 436.27"/><polygon class="j" points="211.4 503.27 47.34 459.31 47.34 499.48 211.4 543.44 211.4 503.27"/><polygon class="o" points="211.4 503.27 47.34 459.31 47.34 499.48 211.4 543.44 211.4 503.27"/><line class="c" x1="513.15" y1="123.39" x2="544.97" y2="105.02"/><line class="c" x1="365.42" y1="208.68" x2="460.63" y2="153.71"/><line class="c" x1="231.58" y1="285.96" x2="312.69" y2="239.13"/><line class="c" x1="48.79" y1="391.49" x2="183.35" y2="313.8"/><line class="c" x1="636.44" y1="298.17" x2="709.92" y2="255.75"/><line class="c" x1="490.54" y1="382.4" x2="619.05" y2="308.21"/><line class="c" x1="356.86" y1="459.58" x2="467.58" y2="395.66"/><line class="c" x1="212.34" y1="543.03" x2="331.67" y2="474.13"/></svg>
\ No newline at end of file
diff --git a/example/styleguide/res/templates/intro.html b/example/styleguide/res/templates/intro.html
index ef797669f6..305dabc2bb 100644
--- a/example/styleguide/res/templates/intro.html
+++ b/example/styleguide/res/templates/intro.html
@@ -30,7 +30,7 @@
         <h2>Everything Is An Object</h2>
         <div class="cols cols1-1">
             <div class="col">
-            <p>First and foremost, Open MCT uses a “object-oriented” approach: everything in the system is an object. Objects come in different types, and some objects can contain other objects of given types. This is a very familiar and ubiquitous model, very similar to how the file management system of all modern computers work. For example, a folder object can contain any other type of object. A presentation file can contain an image. This is conceptually the same in Open MCT.</p>
+            <p>First and foremost, Open MCT uses a “object-oriented” approach: everything in the system is an object. Objects come in different types, and some objects can contain other objects of given types. This is similar to how the file management system of all modern computers works: a folder object can contain any other type of object, a presentation file can contain an image. This is conceptually the same in Open MCT.</p>
             <p>As you develop plugins for Open MCT, consider how a generalized component might be combined with others when designing to create a rich and powerful larger object, rather than adding a single monolithic, non-modular plugin. To solve a particular problem or allow a new feature in Open MCT, you may need to introduce more than just one new object type.</p>
             </div>
             <div class="col">
@@ -60,7 +60,7 @@
                 <p>Views are simply different ways to view the content of a given object. For example, telemetry data could be viewed as a plot or a table. In each view, all of the data is present; it’s just represented differently. If we looked at the contents of a Folder and certain files disappeared because we switched from a list to a grid view, the user would find this unexpected and confusing. When providing views for an object, all the content of the object should be present in each view.</p>
             </div>
             <div class="col">
-                <img src="/example/styleguide/res/images/diagram-objects.svg" />
+                <img src="/example/styleguide/res/images/diagram-views.svg" />
             </div>
         </div>
     </div>