<script src="https://gojs.net/beta/release/go.js"></script>
<body>

  <div id="myDiagramDiv" style="border: solid 3px red; width:300px; height:300px; direction: RTL;"></div>
  <p><a href="https://gojs.net"/>gojs.net<a/></p>
</body>
  function init() {
    var $ = go.GraphObject.make;

    myDiagram = $(go.Diagram, "myDiagramDiv",
                  {
                    initialContentAlignment: go.Spot.Center,  // center the content
                    "undoManager.isEnabled": true  // enable undo & redo
                  });


    myDiagram.nodeTemplate =
      $(go.Node, "Auto",  // the Shape will go around the TextBlock
        $(go.Shape, "RoundedRectangle", { strokeWidth: 0},
          // Shape.fill is bound to Node.data.color
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8 },
          new go.Binding("text", "key"))
      );

    myDiagram.model = new go.GraphLinksModel(
    [
      { key: "كائن رسومي\nرسم بياني\nمخطط", color: "lightblue" },
      { key: "كائن رسومي\nرسم بياني", color: "orange" },
      { key: "كائن رسومي\nرسم بياني", color: "lightgreen" },
      { key: "كائن رسومي\nرسم بياني\nمخطط", color: "pink" }
    ],
    [

    ]);
  }

init();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.