GraphQL

Generador de imágenes de código GraphQL

Convierte fragmentos de GraphQL en imágenes que merece la pena compartir, sin salir de tu Mac.

Una consulta GraphQL es sobre todo forma, y por eso se lee bien como imagen y mal como párrafo de texto partido.

Codeshot detecta GraphQL a partir del código que pegas, así que no hay selector de lenguaje que puedas equivocar. Aquí tienes el mismo fragmento en tres de los 30 temas incluidos, renderizados con las hojas de estilo de la propia app.

query Snapshots($theme: String!, $limit: Int = 10) {
  snapshots(theme: $theme, first: $limit) {
    edges {
      node {
        id
        theme
        exportScale
      }
    }
  }
}
Atom One · oscuro
query Snapshots($theme: String!, $limit: Int = 10) {
  snapshots(theme: $theme, first: $limit) {
    edges {
      node {
        id
        theme
        exportScale
      }
    }
  }
}
GitHub · oscuro
query Snapshots($theme: String!, $limit: Int = 10) {
  snapshots(theme: $theme, first: $limit) {
    edges {
      node {
        id
        theme
        exportScale
      }
    }
  }
}
Panda Syntax · oscuro

Elegir un tema para GraphQL

El anidamiento es el mensaje. Elige una proporción lo bastante alta para que quepa todo el conjunto de selección sin cortar el último campo.

Acertar con el tamaño

Deja que la imagen siga a tu contenido o fíjala a una proporción — 1:1, 4:3, 3:2, 16:9, 9:16, 2:3 o 3:4 — y exporta a 1×, 2× o 3× para que se mantenga nítida en pantallas retina. Cópiala al portapapeles con C o guárdala con S.

Mira los 30 temas comparados o lee el flujo completo.

Hecho para GraphQL y otros 59 lenguajes

Todo se ejecuta en tu Mac. Tu código nunca sale de ahí.

Descargar