How to use @gitgraph/js - 10 common examples

{(graphContainer) => {
        const gitgraph = createGitgraph(graphContainer, {
          mode: Mode.Compact,
          generateCommitHash: createFixedHashGenerator(),
        });
        const master = gitgraph
          .branch("master")
          .commit()
          .commit();

        // Branch has more commits.
        const develop = gitgraph.branch("develop").commit();
        master.merge(develop);

        // Branch & master have as much commits.
        const feat1 = gitgraph.branch("feat1").commit();
        master.commit();
        master.merge(feat1);

{(graphContainer) => {
        const gitgraph = createGitgraph(graphContainer, {
          generateCommitHash: createFixedHashGenerator(),
        });

        const master = gitgraph.branch("master");

        // Tag on branch
        master
          .commit()
          .tag("v1.0")
          .tag("first release");

        master.commit();
        master.tag("v1.1");

        master.commit({ tag: "v1.2" });

{(graphContainer) => {
        const gitgraph = createGitgraph(graphContainer, {
          mode: Mode.Compact,
          generateCommitHash: createFixedHashGenerator(),
        });
        const master = gitgraph
          .branch("master")
          .commit()
          .commit();

        // Branch has more commits.
        const develop = gitgraph.branch("develop").commit();
        master.merge(develop);

        // Branch & master have as much commits.
        const feat1 = gitgraph.branch("feat1").commit();
        master.commit();
        master.merge(feat1);

{(graphContainer) => {
        const gitgraph = createGitgraph(graphContainer, {
          generateCommitHash: createFixedHashGenerator(),
          orientation: Orientation.Horizontal,
        });

        const master = gitgraph.branch("master").commit("Initial commit");

        // Shouldn't render tags on horizontal mode
        master.tag("v1.0");

        const develop = gitgraph.branch("develop");
        develop.commit("one");
        master.commit("two");
        develop.commit("three");
        master.merge(develop);
        master.commit();
      }}

{(graphContainer) => {
        const customBranchLabels = templateExtend(TemplateName.Metro, {
          branch: {
            label: {
              bgColor: "#ffce52",
              color: "black",
              strokeColor: "#ce9b00",
              borderRadius: 0,
              font: "italic 12pt serif",
            },
          },
        });

        const gitgraph = createGitgraph(graphContainer, {
          generateCommitHash: createFixedHashGenerator(),
          template: customBranchLabels,
        });

        gitgraph
          .commit("one")
          .commit("two")
          .commit("three");
      }}

{(graphContainer) => {
        const gitgraph = createGitgraph(graphContainer, {
          generateCommitHash: createFixedHashGenerator(),
        });

        const onMessageClick = action("click on message");

        const master = gitgraph.branch("master");
        master.commit({ subject: "Hello", onMessageClick });
        master.commit({ subject: "World", onMessageClick });
      }}

{(graphContainer) => {
        const gitgraph = createGitgraph(graphContainer, {
          generateCommitHash: createFixedHashGenerator(),
        });

        gitgraph
          .commit({ subject: "Initial commit", dotText: "1" })
          .commit({
            subject: "Another commit",
            dotText: "2",
            style: { dot: { font: "italic 12pt Calibri" } },
          })
          .commit({ subject: "Do something crazy", dotText: "🙀" });
      }}

{(graphContainer) => {
        const gitgraph = createGitgraph(graphContainer, {
          generateCommitHash: createFixedHashGenerator(),
          orientation: Orientation.HorizontalReverse,
          template: TemplateName.BlackArrow,
        });

        const master = gitgraph.branch("master").commit("Initial commit");
        const develop = gitgraph.branch("develop");
        develop.commit("one");
        master.commit("two");
        develop.commit("three");
        master.merge(develop);
        master.commit();
      }}

{(graphContainer) => {
        const renderMessage: CommitOptions["renderMessage"] = (commit) => {
          return createText({
            translate: { x: 0, y: commit.style.dot.size },
            fill: commit.style.dot.color,
            content: `${commit.hashAbbrev} - ${commit.subject}`,
          });
        };

        const gitgraph = createGitgraph(graphContainer, {
          generateCommitHash: createFixedHashGenerator(),
        });

        gitgraph
          .commit({ subject: "Initial commit" })
          .commit({ subject: "Another commit" })
          .commit({
            subject: "Do something crazy",
            renderMessage,
          });

        gitgraph
          .branch("dev")
          .commit({
            subject: "Oh my god",
            renderMessage,

{(graphContainer) => {
          const gitgraph = createGitgraph(graphContainer, {
            generateCommitHash: createFixedHashGenerator(),
          });

          gitgraph
            .branch("master")
            .commit("Initial commit")
            .tag({ name: "v1.0", render: renderTag });
        }}