Cyjs.NET is an interface for Cytoscape.js written in F# to visualiz complex networks and integrate these with any type of attribute data.

Table of contents



The following examples show how easy it is to start working with Cyjs.NET.

For applications and libraries

You can get all Cyjs.NET packages from nuget at nuget page.

  • dotnet CLI
dotnet add package Cyjs.NET --version <desired-version-here>

Or add the package reference directly to your .*proj file:

<PackageReference Include="Cyjs.NET" Version="<desired-version-here>" />

For scripting

You can include the package via an inline package reference:

#r "nuget: Cyjs.NET, <desired-version-here>"



The general design philosophy of Cyjs.NET implements the following visualization flow:

  • initialize a Cytoscape object by using the CyGraph.initEmpty function.
  • attach elements e.g. notes, edges and data to visulize and further
  • style the graph with fine-grained control, e.g. by setting labels, color, etc.
  • display (in the browser or as cell result in a notebook) or save the graph (comming soon)

Initializing a graph

The CyGraph module contains the CyGraph.initEmpty function to create an empty graph. You can therefore initialize a cytoscape graph like this:

open Cyjs.NET
let myFirstGraph = 
    CyGraph.initEmpty ()

Attach nodes and edges

The Elements module contains the node and edge functions to create the respective element. Node and edges can be decorated with data as CyStyleParam list You can therefore create a cytoscape graph with two nodes and an edge like this:

open Elements

let myGraph = 
    CyGraph.initEmpty ()
    |> CyGraph.withElements [
            node "n1" [ CyParam.label "FsLab"  ]
            node "n2" [ CyParam.label "ML" ]
            edge  "e1" "n1" "n2" []

Styling a graph

Styling functions are generally the CyGraph.with* naming convention. The following styling example does:

  • add two nodes including a text label
  • add an edge without any additional data
  • styles the nodes with color and content via CyGraph.withStyle
  • sets the graph size to 800 x 400 pixels via CyGraph.withSize
let myFirstStyledGraph =     
    CyGraph.initEmpty ()
    |> CyGraph.withElements [
            node "n1" [ CyParam.label "FsLab"  ]
            node "n2" [ CyParam.label "ML" ]
            edge  "e1" "n1" "n2" []
    |> CyGraph.withStyle "node"     
                CyParam.content =. CyParam.label
                CyParam.color "#A00975"
    |> CyGraph.withSize(800, 400)  

Attention: =. is a styling mapper and allows to pass data from different sources into the layout. Here the label attached to each node is rendered as content.

Displaying a graph in the browser

The function will open a browser window and render the input graph there. When working in a notebook context you want to use HTML.toEmbeddedHTML for the moment,


Should render this chart in your brower:


And here is what happened after applying the styles from above:

Contributing and copyright

The project is hosted on GitHub where you can report issues, fork the project and submit pull requests. If you're adding a new public API, please also consider adding samples that can be turned into a documentation. You might also want to read the library design notes to understand how it works.

The library is available under Public Domain license, which allows modification and redistribution for both commercial and non-commercial purposes. For more information see the License file in the GitHub repository.

namespace Cyjs
namespace Cyjs.NET
val myFirstGraph : CytoscapeModel.Cytoscape
module CyGraph

from Cyjs.NET
val initEmpty : unit -> CytoscapeModel.Cytoscape
module Elements

from Cyjs.NET
val myGraph : CyGraph.CyGraph
val withElements : elems:seq<CytoscapeModel.Element> -> cy:CyGraph.CyGraph -> CyGraph.CyGraph
val node : id:string -> dataAttributes:CyParam.CyStyleParam list -> Node
module CyParam

from Cyjs.NET
val label : v:'a -> CyParam.CyStyleParam
val edge : id:string -> sourceId:string -> targetId:string -> dataAttributes:CyParam.CyStyleParam list -> Edge
val myFirstStyledGraph : CyGraph.CyGraph
val withStyle : selector:string -> cyStyles:seq<CyParam.CyStyleParam> -> cy:CyGraph.CyGraph -> CyGraph.CyGraph
val content : v:'a -> CyParam.CyStyleParam
val color : v:'a -> CyParam.CyStyleParam
val withSize : width:int * height:int -> cy:CyGraph.CyGraph -> CyGraph.CyGraph
val show : cy:CyGraph.CyGraph -> unit
val withZoom : zoom:CytoscapeModel.Zoom -> cy:CyGraph.CyGraph -> CyGraph.CyGraph
namespace Cyjs.NET.CytoscapeModel
Multiple items
type Zoom =
  inherit DynamicObj
  new : unit -> Zoom
  static member Init : ?Level:float * ?Position:(int * int) * ?RenderedPosition:(int * int) * ?ZoomingEnabled:bool -> Zoom
  static member Update : ?Level:float * ?Position:(int * int) * ?RenderedPosition:(int * int) * ?ZoomingEnabled:bool -> (Zoom -> Zoom)

new : unit -> CytoscapeModel.Zoom
static member CytoscapeModel.Zoom.Init : ?Level:float * ?Position:(int * int) * ?RenderedPosition:(int * int) * ?ZoomingEnabled:bool -> CytoscapeModel.Zoom
module HTML

from Cyjs.NET
val toEmbeddedHTML : cy:CytoscapeModel.Cytoscape -> string