Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html>
<head>
<title>State Chart</title>
</head>
<body onload="init()">

  <div id="myDiagram" style="background-color: whitesmoke; border: solid 1px black; width: 20%; height: 300px"></div>
</body>
</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                 var nodes, links, myModel, $, myDiagram;

 

function init(){

// initialize graph object
  $ = go.GraphObject.make;

  
   myDiagram= $(go.Diagram,"myDiagram");


  
  myDiagram.add(
  $(go.Node,{resizable:true,resizeObjectName:"a"},
    $(go.Panel,
    $(go.Shape,
      {name:"a",  geometryString:"F M231.645,236.645H8.355V13.355h223.29       V236.645z",stroke:"red",
      }),
      $(go.Shape,
      { geometryString:"  F M42.694,202.306h154.611V47.694H42.694V202.306z",stroke:"red",fill:"blue"
      }         
))));
  
    myDiagram.add(
  $(go.Node,{resizable:true,resizeObjectName:"a"},
    $(go.Panel,"Viewbox",{name:"a",height:50,width:50},
    $(go.Panel,
    $(go.Shape,
      {  geometryString:"F M231.645,236.645H8.355V13.355h223.29       V236.645z",stroke:"red",
      }),
      $(go.Shape,
      { geometryString:"  F M42.694,202.306h154.611V47.694H42.694V202.306z",stroke:"red",fill:"blue"
      }         
)))));
  
  
  myDiagram.add(
  $(go.Node,"Auto"{resizable:true,resizeObjectName:"a"},
     $(go.Panel,"Viewbox",{name:"a",height:100,width:100},
        $(go.Panel,
    $(go.Shape,
      { fill:"black",geometryString: " F M23.0009714,10.4132422 L26.247637,7.16657655 C26.4458877,6.96832582 26.4552561,6.65626622 26.2497359,6.45074605 L25.549254,5.75026408 C25.3521624,5.55317254 25.0374323,5.5483541 24.8334234,5.75236299 L21.5949168,8.99086965 C21.3208887,8.76956447 21.0338361,8.56461749 20.7351744,8.37744406 C19.5849289,7.63711806 18.3055601,7.19187142 17,7.04170416 L17,2.50765276 C17,2.22728388 16.785965,2 16.4953156,2 L15.5046844,2 C15.2259549,2 15,2.21914062 15,2.50765276 L15,7.04170416 C14.166388,7.13758732 13.343454,7.35377254 12.5579929,7.69025982 C11.7646556,8.00773225 11.0298874,8.43676841 10.372635,8.95842148 L7.16657655,5.75236299 C6.96832582,5.55411226 6.65626622,5.54474391 6.45074605,5.75026408 L5.75026408,6.45074605 C5.55317254,6.64783759 5.5483541,6.96256767 5.75236299,7.16657655 L8.95842148,10.372635 C7.94128339,11.6541695 7.27626194,13.2304087 7.10381017,14.9608996 C7.10222207,14.973931 7.10066246,14.9869645 7.09913134,15 L2.50765276,15 C2.22728388,15 2,15.214035 2,15.5046844 L2,16.4953156 C2,16.7740451 2.21914063,17 2.50765276,17 L7.0875928,17 C7.26182556,18.6369208 7.8898599,20.222353 8.97169583,21.5519753 C8.98077952,21.5635931 8.98989049,21.5751873 8.99902863,21.5867578 L5.75236299,24.8334234 C5.55411226,25.0316742 5.54474391,25.3437338 5.75026408,25.549254 L6.45074605,26.2497359 C6.64783759,26.4468275 6.96256767,26.4516459 7.16657655,26.247637 L10.4050832,23.0091304 C11.6857622,24.043407 13.2509194,24.7203895 14.9560778,24.8956009 C14.970716,24.8973928 14.9853568,24.8991487 15,24.9008687 L15,29.4923472 C15,29.7727161 15.214035,30 15.5046844,30 L16.4953156,30 C16.7740451,30 17,29.7808594 17,29.4923472 L17,24.9124072 C18.6369208,24.7381744 20.222353,24.1101401 21.5519753,23.0283042 C21.5635931,23.0192205 21.5751873,23.0101095 21.5867578,23.0009714 L24.8334234,26.247637 C25.0316742,26.4458877 25.3437338,26.4552561 25.549254,26.2497359 L26.2497359,25.549254 C26.4468275,25.3521624 26.4516459,25.0374323 26.247637,24.8334234 L23.0091304,21.5949168 C24.043407,20.3142378 24.7203895,18.7490806 24.8956009,17.0439222 C24.8973928,17.029284 24.8991487,17.0146432 24.9008687,17 L29.4923472,17 C29.7727161,17 30,16.785965 30,16.4953156 L30,15.5046844 C30,15.2259549 29.7808594,15 29.4923472,15 L24.9124072,15 C24.7381744,13.3630792 24.1101401,11.777647 23.0283042,10.4480247 C23.0192205,10.4364069 23.0101095,10.4248127 23.0009714,10.4132422 Z "}),
$(go.Shape,
       { geometryString:"F M16,23 C19.8659932,23 23,19.8659932 23,16 C23,12.1340068 19.8659932,9 16,9 C12.1340068,9 9,12.1340068 9,16 C9,19.8659932 12.1340068,23 16,23 Z x",fill: "white" })))));
}

              
            
!
999px

Console